属性动画
来源:互联网 发布:evanescence知乎 编辑:程序博客网 时间:2024/06/06 00:29
1.概述
今早 5:30 起来给人回答问题,问题是 5:12 提的我吓一跳,心里在想这世界很努力的人太多了。周三下班有一个哥们一口气问了我 3 个,他说他搞了一下午实在搞不定,我很耐心的回答了,但是三分钟能解决的问题你要搞一下午,怪不得你说你天天加班到深夜。其实越是形势不好的时候越是要练习内功,我们学会思考很重要,技术也只是技术而已。话不多说看看今天的效果:
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篇
视频讲解地址:暂时未定
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- 属性动画
- JAVA 对象引用, 以及对象赋值
- 体感手柄-陀螺仪定位平面位移
- 时间范围比较
- 网站分析——线上网站分析VS线下网站分析
- Nosql数据库的分类及应用场景
- 属性动画
- youtube等网站视频下载
- 基于递归调用的斐波那契数列和汉诺塔问题
- JuniperSRX------------------远程管理
- 贵在坚持
- max-points-on-a-line
- matlab展示立体点图
- Python中的对象和对象名
- JAVA 面试宝典