属性动画

来源:互联网 发布:evanescence知乎 编辑:程序博客网 时间:2024/06/06 00:29

1.概述


  今早 5:30 起来给人回答问题,问题是 5:12 提的我吓一跳,心里在想这世界很努力的人太多了。周三下班有一个哥们一口气问了我 3 个,他说他搞了一下午实在搞不定,我很耐心的回答了,但是三分钟能解决的问题你要搞一下午,怪不得你说你天天加班到深夜。其实越是形势不好的时候越是要练习内功,我们学会思考很重要,技术也只是技术而已。话不多说看看今天的效果:

58同城数据加载

2.效果实现 


 
* 2.1 布局分析 *

  可以看到上图可分为三部分,最上面是弹跳的几何形状图形,中间是阴影指示器,最下面是文字,所以布局用LinearLayout,最上面暂且放ImageView,中间阴影放ImageView , 最下面放玩命加载文字。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:gravity="center_horizontal"    android:orientation="vertical">    <ImageView        android:id="@+id/shapeLoadingView"        android:layout_width="24dp"        android:layout_height="24dp"        android:layout_centerHorizontal="true"        android:layout_marginTop="4dp" />    <ImageView        android:id="@+id/indication"        android:layout_width="23dp"        android:layout_height="3dp"        android:layout_centerHorizontal="true"        android:layout_marginTop="82dp"        android:src="@drawable/shadow" />    <TextView        android:id="@+id/promptTV"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/indication"        android:layout_centerHorizontal="true"        android:layout_marginTop="18dp"        android:text="玩命加载中..."        android:textColor="#757575"        android:textSize="14sp" /></LinearLayout>

2.2 组合控件 LoadingView 继承自 LinearLayout

public class LoadingView extends LinearLayout{    private ImageView mShapeLodingView,mIndicationView;    private Context mContext;    public LoadingView(Context context) {        this(context, null);    }    public LoadingView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        this.mContext = context;        initLayout();    }    private void initLayout() {        View.inflate(mContext, R.layout.load_view,this);        mShapeLodingView = (ShapeLoadingView) findViewById(R.id.shapeLoadingView);        mIndicationView = (ImageView) findViewById(R.id.indication);    }}

2.3 动画分析

  这里可以看做两个部分的动画,一个是上面几何图形的下落上抛动画,一个是中间阴影指示器放大缩小的动画,如果能这样组合就算实现了: 当几何图形下落时配合阴影放大,当几何图形上抛时配合中间阴影缩小。需要用到 ObjectAnimator 属性动画

 //初始化下落动画 private void initFreeFallAnimation() {        // 下落动画集合        mFreeFallAnimatiorSet  = new AnimatorSet();        // 几何图形的垂直位移动画        ObjectAnimator freeFallTranslationAnimator = ObjectAnimator.ofFloat(                mShapeLodingView, "translationY", 0, mTranslationYDistance);        // 定义动画的变化率。        freeFallTranslationAnimator.setInterpolator(new AccelerateInterpolator(factor));        // 中间阴影缩小动画        ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationView,                "scaleX", 1, 0.2f);        mFreeFallAnimatiorSet.setDuration(ANIMATION_DURATION);        mFreeFallAnimatiorSet.playTogether(freeFallTranslationAnimator, scaleIndication);        mFreeFallAnimatiorSet.addListener(new AnimatorListenerAdapter() {            //设置动画监听器,监听该动画的开始、停止、取消、结束等状态,我们往往会用AnimtorListener适配器类来只实现我们需要的方法            @Override            public void onAnimationEnd(Animator animation) {                super.onAnimationEnd(animation);                // 下落动画结束,改变形状,然后执行上抛动画                upThrow();                mShapeLodingView.changeShape();            }        });    }

  上抛动画其实和下落动画差不多,只要在下落动画执行完之后启动上抛动画即可,但是我们需要在下落动画结束完后改变形状,最直接的方式便是改变几何图像 ImageView 的背景资源即可,但是个人认为这样不是太好,所以需要自定义几何形状 ShapeLoadingView,然后提供一个 changeShape() 的方法,里面调用 invalidate(),在 onDraw(Canvas canvas) 中画对应的几何形状,具体请看这里 自定义View - 仿 QQ 运动步数进度效果

  最后就剩两个旋转的动画了,我们旋转的动画以及角度问题我们直接从自定义 ShapeLoadingView 中获取,提供一个 getUpThrowRoteAnimation() 方法

/*** 在ShapeLoadingView的构造方法中初始化旋转动画即可*/private void initRoteAnimation() {    mRectRoteAnimation = ObjectAnimator.ofFloat(this,        "rotation", 0, -120);    mDefaultRoteAnimation = ObjectAnimator.ofFloat(this,        "rotation", 0, 180);}/*** 得到当前正在上抛时应该旋转的动画*/public ObjectAnimator getUpThrowRoteAnimation() {    switch (mCureentShape){        case SHAPE_RECT:            return  mRectRoteAnimation;        default:            return mDefaultRoteAnimation;    }}

给上抛动画设置动画监听,在其 onAnimationStart() 中执行旋转动画

mUpThrowAnimatiorSet.addListener(new AnimatorListenerAdapter() {    @Override    public void onAnimationEnd(Animator animation) {        super.onAnimationEnd(animation);        //动画结束,下落        freeFall();    }    @Override    public void onAnimationStart(Animator animation) {        super.onAnimationStart(animation);        // 动画开始,和旋转动画一起执行        startShapeRoteAnimator();    }    /**    * 执行旋转动画    */    private void startShapeRoteAnimator() {        ObjectAnimator roteAnimation  = mShapeLodingView.getUpThrowRoteAnimation();        roteAnimation.setDuration(ANIMATION_DURATION);        roteAnimation.setInterpolator(new DecelerateInterpolator(factor));        roteAnimation.start();    }});

所有分享大纲:Android进阶之旅 - 自定义View篇

视频讲解地址:暂时未定  

原创粉丝点击