Android基础篇之补间动画(Tween)
2016-11-05 12:33
357 查看
效果图:
补间动画重点内容是可以对View进行一系列的动画操作,包括淡入淡出、缩放、平移、旋转四种。
下面的每个动画效果都可以设置一个Interpolator,所以给代码之前这里先讲一下 Interpolator(插值) 被用来修饰动画效果,定义动画的变化率,可以使存在的动画效果accelerated(加速),decelerated(减速),repeated(重复),bounced(弹跳)等。
它可以插入以下值:
AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢,在中间的时候加速
AccelerateInterpolator 在动画开始的地方速率改变比较慢,然后开始加速
AnticipateInterpolator 开始的时候向后然后向前甩
AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
BounceInterpolator 动画结束的时候弹起
CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
DecelerateInterpolator 在动画开始的地方快然后慢
LinearInterpolator 以常量速率改变
OvershootInterpolator 向前甩一定值后再回到原来位置
代码如下:
activity_main:
res/anim/alpha_anim.xml (透明动画)
res/anim/rotate_anim.xml (旋转动画)
res/anim/scale_anim.xml (缩放动画)
res/anim/translate_anim.xml (位移动画)
MainActivity
此动画从java与xml两方面进行了实现,还是比较详细的,不会的小伙伴赶快敲起来吧
补间动画重点内容是可以对View进行一系列的动画操作,包括淡入淡出、缩放、平移、旋转四种。
下面的每个动画效果都可以设置一个Interpolator,所以给代码之前这里先讲一下 Interpolator(插值) 被用来修饰动画效果,定义动画的变化率,可以使存在的动画效果accelerated(加速),decelerated(减速),repeated(重复),bounced(弹跳)等。
它可以插入以下值:
AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢,在中间的时候加速
AccelerateInterpolator 在动画开始的地方速率改变比较慢,然后开始加速
AnticipateInterpolator 开始的时候向后然后向前甩
AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
BounceInterpolator 动画结束的时候弹起
CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
DecelerateInterpolator 在动画开始的地方快然后慢
LinearInterpolator 以常量速率改变
OvershootInterpolator 向前甩一定值后再回到原来位置
代码如下:
activity_main:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/iv_image" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@drawable/seven"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="alpha_anim" android:text="透明动画" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="scale_anim" android:text="缩放动画" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="rotate_anim" android:text="旋转动画" /> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:onClick="translate_anim" android:text="移动动画" /> </LinearLayout> </LinearLayout>
res/anim/alpha_anim.xml (透明动画)
<?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="5000" android:fromAlpha="1.0" android:interpolator="@android:anim/linear_interpolator" android:toAlpha="0.1" > <!-- fromAlpha:设置起始的透明度 --> <!-- toAlpha:设置结束的透明度 --> </alpha>
res/anim/rotate_anim.xml (旋转动画)
<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0.0" android:pivotX="50%" android:pivotY="50%" android:interpolator="@android:anim/cycle_interpolator" android:toDegrees="180" android:duration="5000" > <!-- fromDegrees:设置起始的旋转角度 --> <!-- toDegrees:设置结束的旋转角度 --> </rotate>
res/anim/scale_anim.xml (缩放动画)
<?xml version="1.0" encoding="utf-8"?> <scale xmlns:android="http://schemas.android.com/apk/res/android" android:pivotX="50%" android:pivotY="50%" android:fromXScale="1.0" android:toXScale="0.1" android:fromYScale="1.0" android:toYScale="0.1" android:duration="5000" android:fillAfter="true" > <!--android:pivotX 設置縮放的x軸坐標 --> <!--android:pivotY 設置縮放的y軸坐標 --> <!--android:fromXScale 設置縮放的x軸的起始大小 --> <!--android:toXScale 設置縮放的x軸的最終大小 --> <!--android:fromYScale 設置縮放的y軸的起始大小 --> <!--android:fromYScale 設置縮放的x軸的最終大小 --> </scale>
res/anim/translate_anim.xml (位移动画)
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="10%" android:fromYDelta="10%" android:toXDelta="80%" android:toYDelta="80%" android:duration="5000" android:fillAfter="true" > <!--android:fromXDelta 設置位移起始的x軸坐標 --> <!--android:fromYDelta 設置位移起始的y軸坐標 --> <!--android:toXDelta 設置位移结束的x軸坐标 --> <!--android:toYDelta 設置位移结束的Y軸坐标 --> </translate>
MainActivity
import android.os.Bundle; import android.app.Activity; import android.view.View; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.AnimationUtils; import android.view.animation.CycleInterpolator; import android.view.animation.LinearInterpolator; import android.view.animation.RotateAnimation; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; public class MainActivity extends Activity { ImageView iv_image; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv_image = (ImageView) findViewById(R.id.iv_image); } public void alpha_anim(View view) { //加载动画 Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim); // 表示动画播放结束后,是否保存最后的状态 animation.setFillAfter(true); animation.setAnimationListener(animationListener); iv_image.startAnimation(animation); } private AnimationListener animationListener = new AnimationListener() { //动画开始时做的事情 @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub } //替换该动画 @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } //动画结束时可以做的事情 @Override public void onAnimationEnd(Animation animation) { // TODO Auto-generated method stub rotate_anim(iv_image); } }; /** * 通过java代码实现透明动画的效果 * */ public void alpha_java(View v) { AlphaAnimation animation = new AlphaAnimation(0.0f, 1.0f); animation.setDuration(3000); animation.setFillAfter(true); animation.setInterpolator(new LinearInterpolator()); iv_image.startAnimation(animation); } public void scale_anim(View view) { scale_xml(); // scale_java(); } /** * 通过xml代码实现缩放动画的效果 * */ public void scale_xml() { Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_anim); animation.setInterpolator(new CycleInterpolator(1.0f)); iv_image.startAnimation(animation); } /** * 通过java代码实现缩放动画的效果 * */ public void scale_java() { ScaleAnimation animation = new ScaleAnimation(1.0f, 0.1f, 1.0f, 0.1f, iv_image.getWidth() / 2, iv_image.getHeight() / 2); animation.setDuration(5000); animation.setInterpolator(new LinearInterpolator()); animation.setFillAfter(true); iv_image.startAnimation(animation); } public void rotate_anim(View view) { rotate_xml(); // rotate_java(); } /** * 通过xml代码实现旋轉动画的效果 * */ public void rotate_xml() { Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim); animation.setFillAfter(true); iv_image.startAnimation(animation); } /** * 通过java代码实现旋轉动画的效果 * */ public void rotate_java() { RotateAnimation animation = new RotateAnimation(0.0f, 720.0f, iv_image.getWidth() / 2, iv_image.getHeight() / 2); animation.setDuration(5000); // 保存結束后的狀態 animation.setFillAfter(true); animation.setInterpolator(new LinearInterpolator()); iv_image.startAnimation(animation); } public void translate_anim(View view) { Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim); animation.setInterpolator(new LinearInterpolator()); iv_image.startAnimation(animation); } /** * 通过xml代码实现位移动画的效果 * */ public void translate_xml() { Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim); animation.setInterpolator(new LinearInterpolator()); iv_image.startAnimation(animation); } /** * 通过java代码实现位移动画的效果 * */ public void translate_java() { TranslateAnimation animation = new TranslateAnimation( iv_image.getWidth() / 2, iv_image.getWidth() / 5, iv_image.getWidth() / 2, iv_image.getWidth() / 5); animation.setDuration(5000); animation.setFillAfter(true); animation.setInterpolator(new LinearInterpolator()); iv_image.startAnimation(animation); } }
此动画从java与xml两方面进行了实现,还是比较详细的,不会的小伙伴赶快敲起来吧
相关文章推荐
- Android--Tween补间动画
- android—补间动画(Tween Animation)旋转的血轮眼
- Android笔记(六十四) android中的动画——补间动画(tweened animation)
- Android动画主要包含补间动画(Tween)View Animation、帧动画(Frame)Drawable Animation、以及属性动画Property Animation
- Android中的补间动画(tween)的简单使用
- Android 补间动画(Tween)之二,自定义补间动画
- Android动画之补间动画(Tween Animation)实例详解
- android动画之:补间动画(Tween动画)
- Android补间动画(View Animation,Tweened Animation)
- Android动画-补间(Tween)动画
- android 补间动画 tween animation xml基本属性
- android基础笔记——补间动画(Tween)代码实现
- android补间动画(tween animation)xml基本属性
- Android开发(26)--补间动画(Tween)的实现
- Android两大动画之Tween(补间动画)详解
- android补间动画例子--Tween
- Android的图形与图像处理之四 补间动画(Tween)
- Android动画1-补间动画(TweenAnimation)
- Android 连续的补间动画(Animation/Tween)
- Android 动画之二 View Animation —— 补间(Tween)动画与Interpolator的介绍