补间动画(Tween Animation)

1、补间动画的特性:

  • a.渐变动画支持四种类型:平移(Translate)、旋转(Rotate)、缩放(Scale)、不透明度

  • b. 只是显示的位置变动,View的实际位置未改变,表现为View移动到其他地方,点击事件仍在原处才能响应。

  • c. 组合使用步骤较复杂。

  • d. View Animation 也是指此动画。

2、补间动画的优缺点:

  • 缺点:当平移动画执行完停在最后的位置,结果焦点还在原来的位置(控件的属性没有真的被改变)
  • 优点:相对于逐帧动画来说,补间动画更为连贯自然

3、补间动画的实现:

首先要准备你的补间动画的代码将他放在资源文件夹下的anim文件夹里,就以平移,翻转、缩放、透明动画为例: 
透明补间动画:

<set xmlns:android="http://schemas.android.com/apk/res/android"android:fillEnabled="true"android:fillAfter="true"><alpha
        android:duration="2000"android:fromAlpha="1"android:repeatCount="1"android:repeatMode="reverse"android:toAlpha="0" />
</set>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

旋转补间动画:

<set xmlns:android="http://schemas.android.com/apk/res/android"android:fillEnabled="true"android:fillAfter="true"><rotate
        android:duration="2000"android:fromDegrees="0"android:interpolator="@android:anim/accelerate_interpolator"android:pivotX="50%"android:pivotY="50%"android:toDegrees="720" ></rotate><rotate
        android:duration="2000"android:fromDegrees="360"android:interpolator="@android:anim/accelerate_interpolator"android:pivotX="50%"android:pivotY="50%"android:startOffset="2000"android:toDegrees="0" ></rotate>
</set>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

缩放补间动画:

<set xmlns:android="http://schemas.android.com/apk/res/android"android:fillEnabled="true"android:fillAfter="true"><scale android:fromXScale="1"android:interpolator="@android:anim/decelerate_interpolator"android:fromYScale="1"android:toXScale="2.0"android:toYScale="2.0"android:pivotX="50%"android:pivotY="50%"android:fillAfter="true"android:repeatCount="1"android:repeatMode="reverse"android:duration="2000"/>
</set>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

移动补间动画:

<set xmlns:android="http://schemas.android.com/apk/res/android"android:fillEnabled="true"android:fillAfter="true"><translate
        android:fromXDelta="0"android:toXDelta="860"android:fromYDelta="0"android:toYDelta="0"android:fillAfter="true"android:repeatMode="reverse"android:repeatCount="1"android:duration="2000"></translate>
</set>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

下面就是在需要展示动画的时候调用了:

/*** 补间动画** @author wangyangke* @date:2016.9.1 @time 23:40*/
public class TweenActivity extends AppCompatActivity {private Button b1, b2, b3, b4;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tween);final Animation rotate = AnimationUtils.loadAnimation(this,R.anim.anim_rotate);final Animation translate = AnimationUtils.loadAnimation(this,R.anim.anim_translate);final Animation scale = AnimationUtils.loadAnimation(this,R.anim.anim_scale);final Animation alpha = AnimationUtils.loadAnimation(this,R.anim.anim_alpha);final ImageView iv = (ImageView) findViewById(R.id.imageview);b1 = (Button) findViewById(R.id.btnAlpha);b2 = (Button) findViewById(R.id.btnRotate);b3 = (Button) findViewById(R.id.btnScale);b4 = (Button) findViewById(R.id.btnTranslate);b1.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {// TODO Auto-generated method stubiv.startAnimation(alpha);}});b2.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {// TODO Auto-generated method stubiv.startAnimation(rotate);}});b3.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {// TODO Auto-generated method stubiv.startAnimation(scale);}});b4.setOnClickListener(new View.OnClickListener() {public void onClick(View v) {// TODO Auto-generated method stubiv.startAnimation(translate);}});}public void mToast(View iv) {Toast.makeText(this, "图片被点击了!", Toast.LENGTH_SHORT).show();}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66

帧动画(Frame Animation)

1、帧动画的特性:

  • a. 用于生成连续的Gif效果图。

  • b. DrawableAnimation也是指此动画

2、帧动画的优缺点:

  • 缺点:效果单一,逐帧播放需要很多图片,占用控件较大
  • 优点:制作简单

3、帧动画的实现:

帧动画的效果很单一,当然实现方法也很简单,效果就是达到了GIF图和flansh的效果:

<!--根标签为animation-list,其中oneshot代表着是否只展示一遍,设置为false会不停的循环播放动画根标签下,通过item标签对动画中的每一个图片进行声明android:duration 表示展示所用的该图片的时间长度-->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"><item android:drawable="@drawable/f1" android:duration="300" /><item android:drawable="@drawable/f2" android:duration="300" /><item android:drawable="@drawable/f3" android:duration="300" /><item android:drawable="@drawable/f4" android:duration="300" /><item android:drawable="@drawable/f5" android:duration="300" /><item android:drawable="@drawable/f6" android:duration="300" /><item android:drawable="@drawable/f7" android:duration="300" /><item android:drawable="@drawable/f6" android:duration="300" /><item android:drawable="@drawable/f5" android:duration="300" /><item android:drawable="@drawable/f4" android:duration="300" /><item android:drawable="@drawable/f4" android:duration="300" /><item android:drawable="@drawable/f3" android:duration="300" /><item android:drawable="@drawable/f2" android:duration="300" /><item android:drawable="@drawable/f7" android:duration="300" />
</animation-list>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

使用:

/*** 帧动画** @author wangyangke* @date:2016.9.1 @time 23:50*/
public class FrameActivity extends AppCompatActivity {private ImageView image;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_frame);image = (ImageView) findViewById(R.id.frame_image);}public void startFrame(View view) {image.setBackgroundResource(R.anim.anim_frame);AnimationDrawable anim = (AnimationDrawable) image.getBackground();anim.start();}public void stopFrame(View view) {AnimationDrawable anim = (AnimationDrawable) image.getBackground();if (anim.isRunning()) { //如果正在运行,就停止anim.stop();}}public void startFrame1(View view) {image.setBackgroundResource(R.anim.anim_frame1);AnimationDrawable anim = (AnimationDrawable) image.getBackground();anim.start();}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

属性动画(Property Animation)

下面我们着重介绍下属性动画,干货来了

1、属性动画的特性:

  • a.支持对所有View能更新的属性的动画(需要属性的setXxx()和getXxx())。
  • b. 更改的是View实际的属性,所以不会影响其在动画执行后所在位置的正常使用。
  • c. Android3.0(API11)及以后出现的功能,3.0之前的版本可使用github第三方开源库nineoldandroids.jar进行支持。

2、属性动画的优缺点:

  • 缺点:(3.0+API出现)向下兼容问题
  • 优点:易定制,效果强

3、属性动画的实现:

相比帧动画和补间动画的不同之处属性动画可以不用在资源文件中定义动画也能达到动画效果,而且它可以任意组合动画,组合动画可以一次进行,也可以同时进行,达到了更加炫酷的效果,下面就来看看在代码中如何让使用:


/*** 属性动画** @author wangyangke* @date:2016.9.2 @time 01:12*/
public class PropertyActivity extends AppCompatActivity {private ImageView iv;Button btn;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_property);iv = (ImageView) findViewById(R.id.iv);btn = (Button) findViewById(R.id.btn);}public void mToast(View iv) {Toast.makeText(this, "图片被点击了!", Toast.LENGTH_SHORT).show();}public void play1(View view) {//btn.setTranslationX(100);//100 当前View X坐标的差值TranslateAnimation animation = new TranslateAnimation(0, 100, 0, 0);animation.setDuration(1000);animation.setFillAfter(true);iv.startAnimation(animation);}public void play2(View view) {//1.属性动画ObjectAnimator//btn.setTranslationX(translationX)//translationX 属性 float类型//这个属性动画,改变的是translationX的属性值,0,100//translationX 调用这个属性的setter和getter方法ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationX", 0f, 100f);oa.setDuration(1000);oa.start();//c.getMethod("setTranslationX", int.class);}public void play3(View view) {//3.属性存储器PropertyValuesHolder pvh1 = PropertyValuesHolder.ofFloat("translationX", 0, 100);//缩放动画,X Y轴缩放比例从原始比例,缩小到最小,再放大到原始比例1fPropertyValuesHolder pvh2 = PropertyValuesHolder.ofFloat("scaleX", 1f, 0f, 1f);PropertyValuesHolder pvh3 = PropertyValuesHolder.ofFloat("scaleY", 1f, 0f, 1f);//同时执行三个动画ObjectAnimator oa = ObjectAnimator.ofPropertyValuesHolder(iv, pvh1, pvh2, pvh3);oa.setDuration(1000);oa.start();}public void play4(View view) {//4.执行集合类//一组动画的执行集合类:设置执行的先后顺序,时间等AnimatorSet set = new AnimatorSet();//透明度ObjectAnimator anim1 = ObjectAnimator.ofFloat(iv, "alpha", 0f, 1f);anim1.setDuration(4000);//横向平移ObjectAnimator anim2 = ObjectAnimator.ofFloat(iv, "translationX", 0f, 100f);anim2.setDuration(3000);//纵向平移ObjectAnimator anim3 = ObjectAnimator.ofFloat(iv, "translationY", 0f, 100f);anim3.setDuration(3000);//旋转ObjectAnimator anim4 = ObjectAnimator.ofFloat(iv, "rotation", 0f, 360f);anim4.setDuration(500);//制定动画执行的顺序//anim1 在 anim2 之前执行set.play(anim1).before(anim2);//anim2 anim3 同时执行set.play(anim2).with(anim3);//anim4 在 anim3之后执行set.play(anim4).after(anim3);set.start();}public void play5(View view) {//5.关键帧//Keyframe 定义动画在特定的时间点上特定的状态//第一个0,动画的执行进度,第二个0,初始的状态(0度)Keyframe kf0 = Keyframe.ofFloat(0f, 0f);//动画执行到30%时,应该旋转了360度Keyframe kf1 = Keyframe.ofFloat(0.2f, 360f);//动画执行到100%,重新旋转到0度Keyframe kf2 = Keyframe.ofFloat(1f, 0f);//区别:ObjectAnimator.ofFloat(iv, "rotation", 0f,360f,0f);//将关键帧打包PropertyValuesHolder holder = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2);//创建属性动画对象ObjectAnimator oa = ObjectAnimator.ofPropertyValuesHolder(iv, holder);oa.setDuration(2000);oa.start();}public void play6(View view) {//6. 动画执行监听//AnimatorListenerObjectAnimator oa = ObjectAnimator.ofFloat(btn, "alpha", 1f, 0f);oa.setDuration(1000);oa.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {//动画开始时调用}@Overridepublic void onAnimationRepeat(Animator animation) {//动画重复时调用}@Overridepublic void onAnimationEnd(Animator animation) {动画结束时调用//移除按钮ViewGroup parent = (ViewGroup) btn.getParent();if (parent != null) {parent.removeView(btn);}}@Overridepublic void onAnimationCancel(Animator animation) {//动画取消时调用}});oa.start();}public void play7(View view) {//7.TimeInterpolator :时间插值,用于控制动画执行过程ObjectAnimator oa = ObjectAnimator.ofFloat(iv, "translationY", 0, 300);oa.setDuration(1500);oa.setInterpolator(new BounceInterpolator());oa.start();}public void play8(View view) {//8.ValueAnimator值动画执行类,常配合AnimatorUpdateListener使用//区别:不需要在“构造方法”中指定需要更新的属性final View btn8 = findViewById(R.id.btn8);ValueAnimator va = ValueAnimator.ofFloat(0f, 200f);//ObjectAnimator.ofFloat(iv, "translationX", 0f,200f);//va.setTarget(iv);va.setDuration(2000);va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float v = Float.parseFloat(animation.getAnimatedValue().toString());ViewHelper.setTranslationX(iv, v);//优点:可以同时在回掉方法中,更新多个控件的属性//使用ObjectAnimator还是ValueAnimator取决于是否在一个动画中更新多个控件的属性ViewHelper.setTranslationY(btn8, v);}});va.start();}public void play9(View view) {//9.TypeEvaluator类型估值,用于设置复杂的动画操作属性的值//(0,100)->(100,200)//现有的int、float类型的值,已经无法满足我们的需求了,我们需要自己的值类型//抛物线效果final PointF point = new PointF();TypeEvaluator<PointF> typeEvaluator = new TypeEvaluator<PointF>() {//@Overridepublic PointF evaluate(float fraction, PointF startValue, PointF endValue) {//fraction 就相当于进度0->1//动画执行的当前时间float time = fraction * 3;//3秒//x方向速度:200px/s//y方向速度:point.x = 200 * time;point.y = 0.5f * 200 * time * time;return point;}};ValueAnimator valueAnimator = ValueAnimator.ofObject(typeEvaluator, new PointF(0, 0));valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {//getAnimatedValue方法返回的值,由evaluate计算得到的PointF point = (PointF) animation.getAnimatedValue();ViewHelper.setX(iv, point.x);ViewHelper.setY(iv, point.y);}});valueAnimator.setDuration(3000);valueAnimator.start();}}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213

三者最大的区别

属性动画,顾名思义直接是改变的控件的属性。仔细的同学可能会发现:在补间动画中即使他的位置发生了变化,但是他的诸如 点击事件,监听 ,都还停留在原地,不会跟着控件位置的变化去跟着改变。属性动画最大的特点就是 保留了这些监听之类的属性,即使位置发生变化也不会影响它的使用。

列表内容

Android内置动画

androidSDK内置动画也很丰富,一些简单的动画,google工程师已经为我们写好了,只需要调用即可

总结

动画的效果取决与程序员,你能想到的效果几乎都能实现,只不过是难易程度,时间花费,以及程序员的空间想象能力,思考能力有关,以上实现的只是很简单的属性动画,一部分人还是比较喜欢直接在网上搜索想要的效果直接用,可能连原理都不知道,这是作为一个程序员不应该的。希望大家可以自己去试着做一些自己觉的炫酷的动画效果,而不仅仅是依赖网络,这样做出效果后相信自己的成就感也不言而谕。

属性动画、帧动画、补间动画相关推荐

  1. Android动画学习记录一(Android动画种类、补间动画和帧动画)

    Android动画学习记录一(动画种类.补间动画和帧动画) 动画种类.补间动画和帧动画 Android动画学习记录一(动画种类.补间动画和帧动画) 一.动画种类 二.View动画 2.1 补间动画 补 ...

  2. 形状补间动画和动作补间动画区别一览表

    形状补间动画和动作补间动画区别一览表 项目 形状补间动画 动作补间动画 概念 在一个关键帧中绘制一个形状,然后在另外一个关键帧更改或绘制另一个形状,FLASH据二者间形状创建的动画 在一个关键帧中设置 ...

  3. Android动画学习之补间动画和逐帧动画,移动互联网app开发

    | fromXScale | 指定动画开始时X轴上的缩放系数 | 值为1.0表示不再变化 | | fromYScale | 指定动画开始时Y轴上的缩放系数 | 值为1.0表示不再变化 | | toXS ...

  4. Android动画学习之补间动画

    补间动画简介 补间动画指的是做FLASH动画时,在两个关键帧中间需要做"补间动画",才能实现图画的运动:插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的. 补间动画分 ...

  5. Android实现蝴蝶动画,蝴蝶飞舞- (补间动画+逐帧动画)

    AnimationDrawable animationDrawable; //逐帧动画 //移动蝴蝶位置的定时器 Timer tmrTranslate; TimerTask timerTask; Im ...

  6. Android—逐帧、补间、属性动画

    1.Tween Animation 补间动画 这类动画比较简单,一般就是平移.缩放.旋转.透明度,或者其组合,可以用代码或者xml文件的形式,推荐使用xml文件形式,因为可以复用. 四个动画效果实现类 ...

  7. android104 帧动画,补间动画,属性动画

    ##帧动画FrameAnimation * 多张图片快速切换,形成动画效果 * 帧动画使用xml定义 package com.itheima.frameanimation;import android ...

  8. 属性动画、帧动画、补间动画的介绍使用及对比

    属性动画.帧动画.补间动画的介绍使用及对比 版权声明:转载必须注明本文转自南轩的博客: http://blog.csdn.net/nanxuan521 在android开发中经常会碰到一些动画需求,其 ...

  9. Android动画攻略—帧动画、补间动画、属性动画

    前言 动画时Android开发中使用频率比较高的功能. 对Android提供的补间动画,帧动画以及属性动画做出归纳总结. 目录 1. 帧动画 帧动画总体实现比较简单,其实现本身是实现一个图片集的连续播 ...

最新文章

  1. DymSLAM: 基于几何和运动分割的4D动态场景重建( RAL)
  2. Xen虚拟机迁移技术
  3. 一般线性模型和混合线性模型_线性混合模型如何工作
  4. 论文浅尝 | 将文本建模为关系图,用于联合实体和关系提取
  5. iPhone 12需求强劲 苹果计划将iPhone产量提升30%
  6. Android 7.0 SEAndroid app权限配置
  7. 485芯片RO 口收不到信号问题分析
  8. 甲骨文裁员真的与川普有关吗?
  9. Windows命令之tracert命令
  10. Nat Nanotechnol | 朱涛/陈春英等合作发现碳纳米管呼吸暴露后的延迟毒性导致小鼠原位乳腺肿瘤的多发性广泛转移...
  11. 张孝祥正在整理Java就业面试题大全20100602版本(一)
  12. A. 【UNR #2】积劳成疾
  13. VMware vCenter突然无法正常登陆,出现[503 Service Unavailable]
  14. 节点重要度 matlab,复杂网络节点重要度常用指标及其计算
  15. uniapp隐藏原生导航栏
  16. 常用手机uc浏览器兼容问题记录(陆续补充)
  17. Android 自定义控件起步:自定义TextView
  18. Delphi快速开发本机跨平台Google Maps谷歌地理信息系统GIS解决方案
  19. GPS北斗定位模块对车辆导航的意义
  20. APP高曝光率到智能化投放,SDK猫眼信息流广告的投放策略!

热门文章

  1. 软文营销登顶销售奇迹的4U定律你知道吗?
  2. gbase 8d客户端连接注意事项
  3. 二层基本知识点(一)
  4. 《英语口语900句 (624页+360分钟录音)》(Oral English 900 Expressions)
  5. Mesalink v1.0.0 发布,正式支持 TLS 1.3 和 IPv6,支持CMake编译,支持Windows,实现生产环境可用...
  6. 上证指数开盘指数预测 Matlab
  7. 电路基础 01电压、电流和功率
  8. drupal建站案例_10分钟利用Drupal快速搭建网站
  9. 抖音直播带货变现,带货脚本文案怎么制作?丨国仁网络资讯
  10. 点击复制微信号并跳转到微信