Android动画的学习

常见的动画分为：

-补间动画
-帧动画
- 属性动画

学完这个分享自己项目一个简单的动画：

转场动画：这个是谷歌提供的样式！下面自己模仿了一下。

模仿谷歌设计来自己做了一个。

一补间动画:

对于学过flash动画的人来说补间动画很好理解的，因为动画开始和结尾的中间过程都是假象，是渲染出来的表象，只是显示的位置变动，View的实际位置未改变，表现为View移动到其他地方，点击事件仍在原处才能响应。

补间动画由Animation类来实现具体效果，包括平移（TranslateAnimation）、缩放(ScaleAnimation)、旋转(RotateAnimation)、透明度(AlphaAnimation)四个子类。

实现：

补间动画在android里面支持xml来设置或者java代码设置。
常见的布局动画类如下：

TranslateAnimation

translate属性	TranslateAnimation	含义
android:fromXDelta	TranslateAnimation translateAnimation=TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)；	平移起点X坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）
android:fromYDelta	同上	同理fromXDelta
android:toXDelta	同上	平移终点X坐标（数值、百分数、百分数p，譬如50表示以当前View左上角坐标加50px为初始点、50%表示以当前View的左上角加上当前View宽高的50%做为初始点、50%p表示以当前View的左上角加上父控件宽高的50%做为初始点）
android:toYDelta	同上	同上
android:fillAfter	translateAnimation.setFillAfter(true);	动画显示结束保持最后一帧
android:duration	translateAnimation.setDuration(3000);	动画执行的时间
android:repeatCount	translateAnimation.setRepeatCount(TranslateAnimation.INFINITE);	动画执行的次数可以是整数或者infinite为无限循环执行动画

使用如下：

translate.xml

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:fromXDelta="0"    android:fromYDelta="0"    android:toXDelta="100%"    android:toYDelta="-100%"    android:fillAfter="true"    android:duration="1000"    >translate>

AlphaAnimation

Alpha属性	AlphaAnimation	含义
android:fromAlpha	AlphaAnimation alphaAnimation=new AlphaAnimation(float fromAlpha, float toAlpha);	是View视图起始透明度，透明度是0-1
android:toAlpha	同上	结束时的透明度
android:fillAfter	alphaAnimation.setFillAfter(true);	动画显示结束保持最后一帧
android:duration	alphaAnimation.setDuration(3000);	动画执行的时间
android:repeatCount	alphaAnimation.setRepeatCount(TranslateAnimation.INFINITE);	动画执行的次数可以是整数或者infinite为无限循环执行动画

使用如下：

alpha.xml

<?xml version="1.0" encoding="utf-8"?><alpha xmlns:android="http://schemas.android.com/apk/res/android"    android:fromAlpha="1"    android:toAlpha="0.5"    android:fillAfter="true"    android:duration="3000"    >alpha>

RotateAnimation

RotateAnimation 属性	RotateAnimation	含义
android:fromDegrees	RotateAnimation rotateAnimation=RotateAnimation(float fromDegrees, float toDegrees);	是View视图起始角度
android:toDegrees	同上	结束时的角度
android:fillAfter	rotateAnimation.setFillAfter(true);	动画显示结束保持最后一帧
android:duration	rotateAnimation.setDuration(3000);	动画执行的时间
android:repeatCount	rotateAnimation.setRepeatCount(TranslateAnimation.INFINITE);	动画执行的次数可以是整数或者infinite为无限循环执行动画

使用如下：

rotate.xml

<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android"    android:fromDegrees="0"    android:toDegrees="90"    android:fillAfter="true"    android:duration="3000"    >rotate>

ScaleAnimation

ScaleAnimation属性	ScaleAnimation	含义
android:fromXScale	ScaleAnimation scaleAnimation=ScaleAnimation(float fromX, float toX, float fromY, float toY)	这个相信能看懂。
android:toXScale	同上	结束时的位置
android:fillAfter	scaleAnimation.setFillAfter(true);	动画显示结束保持最后一帧
android:duration	scaleAnimation.setDuration(3000);	动画执行的时间
android:repeatCount	scaleAnimation.setRepeatCount(TranslateAnimation.INFINITE);	动画执行的次数可以是整数或者infinite为无限循环执行动画

使用如下：

scale .xml

<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android"    android:fromXScale="0.5"    android:toXScale="1"    android:fromYScale="0.5"    android:toYScale="1"    android:fillAfter="true"    android:duration="3000"    >scale>

AnimationSet

当然了有动画集合这个类了。使用也是很简单的：

set.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="1000"    android:fillAfter="true"    android:shareInterpolator="true"    android:repeatMode="reverse"    >    <scale        android:duration="1000"        android:fillAfter="true"        android:fromXScale="0.5"        android:fromYScale="0.5"        android:toXScale="1"        android:toYScale="1"        android:repeatCount="infinite"/>    <alpha        android:duration="2000"        android:fillAfter="true"        android:fromAlpha="0.7"        android:toAlpha="1"/>    <rotate        android:fromDegrees="0"        android:toDegrees="90"        android:fillAfter="true"        android:duration="1000"        />    <translate        android:fromXDelta="0"        android:fromYDelta="0"        android:toXDelta="100%"        android:toYDelta="-100%"        android:fillAfter="true"        android:duration="2000"        />set>

button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                /*                //位移动画                Animation animation= AnimationUtils.loadAnimation(MainActivity.this,R.anim.translate);                button.setAnimation(animation);                TranslateAnimation translateAnimation=new TranslateAnimation(0,200,0,200);                AlphaAnimation translateAnimation=new AlphaAnimation(0.5f,1f);                translateAnimation.setDuration(3000);                translateAnimation.setRepeatMode(TranslateAnimation.INFINITE);                translateAnimation.setRepeatCount(TranslateAnimation.INFINITE);                translateAnimation.setFillAfter(true);                */               /*                //渐变动画                AlphaAnimation alphaAnimation=new AlphaAnimation(0.5f,1f);                alphaAnimation.setDuration(3000);                alphaAnimation.setRepeatMode(TranslateAnimation.INFINITE);                alphaAnimation.setRepeatCount(TranslateAnimation.INFINITE);                alphaAnimation.setFillAfter(true);                button.startAnimation(alphaAnimation);*/               /*               * //旋转动画               * public RotateAnimation(float fromDegrees, float toDegrees) {               *                RotateAnimation rotateAnimation=new RotateAnimation(0,90);                rotateAnimation.setDuration(3000);                rotateAnimation.setRepeatMode(TranslateAnimation.INFINITE);                rotateAnimation.setRepeatCount(TranslateAnimation.INFINITE);                rotateAnimation.setFillAfter(true);                button.startAnimation(rotateAnimation);*/               /*               * 缩放动画               *               *                ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f, 0.7f, 0.5f, 0.7f);                scaleAnimation.setDuration(3000);                scaleAnimation.setRepeatMode(TranslateAnimation.INFINITE);                scaleAnimation.setRepeatCount(TranslateAnimation.INFINITE);                scaleAnimation.setFillAfter(true);                button.startAnimation(scaleAnimation); */                AlphaAnimation alphaAnimation=new AlphaAnimation(0.5f,1f);                alphaAnimation.setDuration(3000);                alphaAnimation.setRepeatMode(TranslateAnimation.INFINITE);                alphaAnimation.setRepeatCount(TranslateAnimation.INFINITE);                alphaAnimation.setFillAfter(true);                button.startAnimation(alphaAnimation);                RotateAnimation rotateAnimation=new RotateAnimation(0,90);                rotateAnimation.setDuration(3000);                rotateAnimation.setRepeatMode(TranslateAnimation.INFINITE);                rotateAnimation.setRepeatCount(TranslateAnimation.INFINITE);                rotateAnimation.setFillAfter(true);                button.startAnimation(rotateAnimation);                ScaleAnimation scaleAnimation = new ScaleAnimation(0.5f, 0.7f, 0.5f, 0.7f);                scaleAnimation.setDuration(3000);                scaleAnimation.setRepeatMode(TranslateAnimation.INFINITE);                scaleAnimation.setRepeatCount(TranslateAnimation.INFINITE);                scaleAnimation.setFillAfter(true);                button.startAnimation(scaleAnimation);                //动画集合                AnimationSet animationSet=new AnimationSet(true);                animationSet.addAnimation(alphaAnimation);                animationSet.addAnimation(rotateAnimation);                animationSet.addAnimation(scaleAnimation);                animationSet.setDuration(2000);                animationSet.setRepeatMode(AnimationSet.INFINITE);                animationSet.setRepeatCount(AnimationSet.INFINITE);                button.setAnimation(animationSet);            }        });

效果图如下：

1.给简单的view控件设置动画：

2.给Activity设置转场动画：

缩放，淡入淡出，滑进滑出….很多由你来设置：这里为了演示效果设置时间很长。用时候可以设置短。
如下图：第一个页面跳转第二个Activity页面动画效果：

淡入淡出的：

这里在demon里面activity跳转动画都写了好多开参考。

可能很多人不明白100%p和100%这样的问题。明确知道左下角为坐标原点。看看别人的博客就懂了

如上图：Activity A从-100%p滑到0即从位置一滑到位置二。很简单的理解。看图就知道了。

二，属性动画：

由于3.0之前的View动画太过单一，不能够满足开发和用户，所以谷歌在3.0之后提出了属性动画
，属性动画是从3.0及以后出现的（如果要兼容低版本，可以使用一个民间版第三方的一个jar NineOldAndroid.jar,用法跟系统的用法差不多）。不断地控制控件的属性变化达到动画的效果，一般我们是一些组合的属性动画达到复杂的效果。

使用：

使用1:

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view, "translationX", 0f, 300f);        objectAnimator.setDuration(4000);        objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);        objectAnimator.start();        ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(view, "translationY", 0f, 300f);        objectAnimator1.setDuration(7000);        objectAnimator1.setRepeatCount(ObjectAnimator.INFINITE);        objectAnimator1.start();        ObjectAnimator objectAnimator2 = ObjectAnimator.ofFloat(view, "scaleX", 0.2f, 1f);        objectAnimator2.setDuration(6000);        objectAnimator2.setRepeatCount(ObjectAnimator.INFINITE);        objectAnimator2.start();        ObjectAnimator objectAnimator3 = ObjectAnimator.ofFloat(view, "scaleY", 0.2f, 1f);        objectAnimator3.setDuration(6000);        objectAnimator3.setRepeatCount(ObjectAnimator.INFINITE);        objectAnimator3.start();        ObjectAnimator objectAnimator4=ObjectAnimator.ofFloat(view,"alpha",0.5f,1f);        objectAnimator4.setDuration(6000);        objectAnimator4.setRepeatCount(ObjectAnimator.INFINITE);        objectAnimator4.start();

使用2:

ObjectAnimator animator = ObjectAnimator.ofFloat(button, "haha", 0f, 100f);//没有这个属性的时候，就是valueanimator        animator.setDuration(300);        //设置动画监听        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                //动画在执行的过程当中，不断地调用此方法//              animation.getAnimatedFraction()//百分比                //得到duration时间内 values当中的某一个中间值。0f~100f                float value = (float) animation.getAnimatedValue();//                button.setScaleX(0.5f+value/200);//0.5~1                button.setScaleY(0.5f+value/200);//0.5~1            }        });        animator.start();

使用3:

  ValueAnimator valueAnimator=ValueAnimator.ofFloat(0f,200f);        valueAnimator.setDuration(200);        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                //              //动画在执行的过程当中，不断地调用此方法////            animation.getAnimatedFraction()//百分比//          //得到duration时间内 values当中的某一个中间值。0f~100f                float value = (float) animation.getAnimatedValue();//                button.setScaleX(0.5f + value / 200);//0.5~1                button.setScaleY(0.5f + value / 200);//0.5~1            }        });        valueAnimator.start();

使用4:

//3）方法3        //float... values:代表关键帧的值        PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("alpha", 1f,0.7f,1f);        PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("scaleX", 1f,0.7f,1f);        PropertyValuesHolder holder3 = PropertyValuesHolder.ofFloat("scaleY", 1f,0.7f,1f);//      PropertyValuesHolder holder3 = PropertyValuesHolder.ofFloat("translationX", 0f,300f);        ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(button, holder1,holder2,holder3);        animator.setDuration(1000);        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                // TODO Auto-generated method stub                float animatedValue = (float) animation.getAnimatedValue();                float animatedFraction = animation.getAnimatedFraction();                long playTime = animation.getCurrentPlayTime();                System.out.println("animatedValue:"+animatedValue+",  playTime:"+playTime);            }        });        animator.start();

动画集合：

    //4)方法4：-----------------动画集合--------------------        ObjectAnimator animator1 = ObjectAnimator.ofFloat(button,"alpha", 1f,0.7f,1f);        ObjectAnimator animator2 = ObjectAnimator.ofFloat(button,"scaleX", 1f,0.7f,1f);        ObjectAnimator animator3 = ObjectAnimator.ofFloat(button,"scaleY", 1f,0.7f,1f);        AnimatorSet animatorSet = new AnimatorSet();        animatorSet.setDuration(500);//      animatorSet.play(anim);//执行当个动画//      animatorSet.playTogether(animator1,animator2,animator3);//同时执行        animatorSet.playSequentially(animator1,animator2,animator3);//依次执行动画        animatorSet.start();

实现一个抛物线：

首先抛物线方程：水平方向：x：匀速运动：
竖着方向：y=1/2*g*t*t

        ValueAnimator valueAnimator=new ValueAnimator();        valueAnimator.setDuration(4000);        valueAnimator.setObjectValues(new PointF(0,0));//起点坐标        //估值器：====定义计算规则        valueAnimator.setEvaluator(new TypeEvaluator() {            @Override            public PointF evaluate(float fraction, PointF startValue, PointF endValue) {                //拿到每一个时间点的坐标：                //x                PointF pointF=new PointF();                //x=vt                pointF.x=100f*fraction*4;//初始速度*执行的百分比                pointF.y=0.5f*100f*(fraction*4)*(fraction*4);//为了30明显我把g设置成                return pointF;            }        });        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                //得到此事件点的坐标                PointF pointF= (PointF) animation.getAnimatedValue();                button.setX(pointF.x);                button.setY(pointF.y);            }        });        valueAnimator.start();

案例代码：

 //2017年11月10日：实现点击旋转动画这个有点小复杂        ibTop.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if (isWmflag) {//如果是女生                    if (count % 2 == 0 && endOther) {//如果在人体前面进行点击旋转进行旋转动画且切换图片哦                        endOther = false;                        ObjectAnimator oa = ObjectAnimator.ofFloat(home_man_iv, "rotationY",                                new float[]{0f, 60f, 120f, 180f});                        oa.setDuration(1000);                        oa.setRepeatCount(0);                        oa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                            @Override                            public void onAnimationUpdate(ValueAnimator animation) {                                //这个值是获取对应的什么时间进行切换图片。首先设置了0f,60f,120f,180f这四个插入值作为旋转角度，当90度时候我们来切换背景图片达到旋转切换。                                float playTime = (float) animation.getAnimatedValue();                                if (playTime >= 90) {                                    home_man_iv.setBackgroundResource(R.drawable.female_b);                                }                                //当180度时候我们进行标记。这个旋转结束了。可以点击进行下一个动画了。endOther作为标记。                                if (playTime == 180f) {                                    count++;                                    endOther = true;                                }                            }                        });                        oa.start();                    } else if (endOther) {//如果是女生                        endOther = false;                        ObjectAnimator oa = ObjectAnimator.ofFloat(home_man_iv, "rotationY",                                new float[]{0f, 60f, 120f, 180f});                        oa.setDuration(1000);                        oa.setRepeatCount(0);                        oa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                            @Override                            public void onAnimationUpdate(ValueAnimator animation) {                                float playTime = (float) animation.getAnimatedValue();                                if (playTime >= 90) {                                    home_man_iv.setBackgroundResource(R.drawable.female_f);                                }                                if (playTime == 180f) {                                    count++;                                    endOther = true;                                }                            }                        });                        oa.start();                    }                } else {                    if (count % 2 == 0 && endOther) {                        endOther = false;                        ObjectAnimator oa = ObjectAnimator.ofFloat(home_man_iv, "rotationY",                                new float[]{0f, 60f, 120f, 180f});                        oa.setDuration(1000);                        oa.setRepeatCount(0);                        oa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                            @Override                            public void onAnimationUpdate(ValueAnimator animation) {                                float playTime = (float) animation.getAnimatedValue();                                if (playTime >= 90) {                                    home_man_iv.setBackgroundResource(R.drawable.male_b);                                }                                if (playTime == 180f) {                                    count++;                                    endOther = true;                                }                            }                        });                        oa.start();                    } else if (endOther) {                        endOther = false;                        ObjectAnimator oa = ObjectAnimator.ofFloat(home_man_iv, "rotationY",                                new float[]{0f, 60f, 120f, 180f});                        oa.setDuration(1000);                        oa.setRepeatCount(0);                        oa.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                            @Override                            public void onAnimationUpdate(ValueAnimator animation) {                                float playTime = (float) animation.getAnimatedValue();                                if (playTime >= 90) {                                    home_man_iv.setBackgroundResource(R.drawable.male_f);                                }                                if (playTime == 180f) {                                    count++;                                    endOther = true;                                }                            }                        });                        oa.start();                    }                }            }        });

转场动画:
ActivityOptions类作为谷歌提供的转场效果类如果用过的很简单哦。
首先xml里面用android:transitionName作为标记给共享的view。
下面recylerView里面item中item

 <ImageView     android:transitionName="ivtraname"     android:id="@+id/item_iv"     android:layout_width="match_parent"     android:layout_height="180dp"/>

这个是跳转后的布局里面：

 <ImageView        android:background="@mipmap/rv0"        android:transitionName="ivtraname"        android:scaleType="fitXY"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1" />

sharedElement是ImageView共享View
sharedElementName=tansitionName的名称=ivtraname

public static ActivityOptions makeSceneTransitionAnimation(Activity activity,            View sharedElement, String sharedElementName) {        return makeSceneTransitionAnimation(activity, Pair.create(sharedElement, sharedElementName));    }@SafeVarargs    public static ActivityOptions makeSceneTransitionAnimation(Activity activity,            Pair... sharedElements) {

使用也是很简单的：这里我使用的是兼容包类

 ActivityOptionsCompat optionsCompat1 = ActivityOptionsCompat.makeSceneTransitionAnimation((Activity) context,(View)holder.miv,"ivtraname");                Intent intent = new Intent(context, Main3Activity.class);                context.startActivity(intent, optionsCompat1.toBundle());//最低兼容16

效果如下：

demon地址如下：
https://github.com/luhenchang/Lsn22_SceneTransitionAnimation.git
如果有所不对地方请多多指教，相互学习！！！！
https://github.com/luhenchang/Lsn20_PropertyAnimation.git

Android里的动画（补间动画，帧动画，属性动画）

Android动画的学习

一补间动画:

实现：

TranslateAnimation

translate.xml

AlphaAnimation

alpha.xml

RotateAnimation

rotate.xml

ScaleAnimation

scale .xml

AnimationSet

效果图如下：

1.给简单的view控件设置动画：

2.给Activity设置转场动画：

二，属性动画：

使用：

更多相关文章

随机推荐