android 动画之插值器

xiaoxiao2021-02-28  51

http://blog.csdn.net/sun_star1chen/article/details/12843741

首先要了解为什么需要插值器,因为在补间动画中,我们一般只定义关键帧(首帧或尾帧),然后由系统自动生成中间帧,生成中间帧的这个过程可以成为“插值”。插值器的作用是告诉动画某个属性(比如颜色的渐变)如何随时间变化 。下面是几种常见的插值器:

android 系统支持AccelerateDecelerateInterpolator 、 AccelerateInterpolator 、 AnticipateInterpolator 、AnticipateOverShootInterpolator 、 BounceInterpolator 、 CycleInterpolator 、DecelerateInerpolator 、 LinearInterpolator 、 OverShootInterpolator 共 9 种插值器(若这些插值器不能满足需求,则可以自定义插值器)。

下面写个示例看看如何在代码中定义插值器。

1、 创建好工程后,在res/layout目录下创建文件 interpolator_layout.xml , 文件内容如下

[html]  view plain  copy <?xml version="1.0" encoding="utf-8"?>   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"       android:layout_width="match_parent"       android:layout_height="match_parent"       android:orientation="vertical" >          <LinearLayout           android:layout_width="match_parent"           android:layout_height="wrap_content"           android:orientation="horizontal" >              <Button               android:id="@+id/acc_dec_btn"               style="?android:attr/buttonStyleSmall"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/acc_dec_str" />              <Button               android:id="@+id/acc_btn"               style="?android:attr/buttonStyleSmall"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/acc_str" />              <Button               android:id="@+id/anti_btn"               style="?android:attr/buttonStyleSmall"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/anti_str" />       </LinearLayout>          <LinearLayout           android:layout_width="match_parent"           android:layout_height="wrap_content"           android:orientation="horizontal" >              <Button               android:id="@+id/anti_over_shoot_btn"               style="?android:attr/buttonStyleSmall"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/anti_over_shoot_str" />              <Button               android:id="@+id/bounce_btn"               style="?android:attr/buttonStyleSmall"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/bounce_str" />              <Button               android:id="@+id/cycle_btn"               style="?android:attr/buttonStyleSmall"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/cycle_str" />       </LinearLayout>          <LinearLayout           android:layout_width="match_parent"           android:layout_height="wrap_content"           android:orientation="horizontal" >              <Button               android:id="@+id/dec_btn"               style="?android:attr/buttonStyleSmall"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/dec_str" />              <Button               android:id="@+id/linear_btn"               style="?android:attr/buttonStyleSmall"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/linear_str" />              <Button               android:id="@+id/over_shoot_btn"               style="?android:attr/buttonStyleSmall"               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:text="@string/over_shoot_str" />       </LinearLayout>          <ImageView           android:id="@+id/anim_show_img"           android:layout_width="50dp"           android:layout_height="wrap_content"           android:src="@drawable/ting_frame_3"           android:adjustViewBounds="true" />      </LinearLayout>   2、准备好我们的插值器,在包下面创建文件  nterpolatorUtils.java (定义了各种插值器的类) , 内容如下

[java]  view plain  copy import android.view.animation.AccelerateDecelerateInterpolator;   import android.view.animation.AccelerateInterpolator;   import android.view.animation.AnticipateInterpolator;   import android.view.animation.AnticipateOvershootInterpolator;   import android.view.animation.BounceInterpolator;   import android.view.animation.CycleInterpolator;   import android.view.animation.DecelerateInterpolator;   import android.view.animation.Interpolator;   import android.view.animation.LinearInterpolator;   import android.view.animation.OvershootInterpolator;      public class InterpolatorUtils {          public final static Interpolator ACC_DEC_INERPOLATOR = new AccelerateDecelerateInterpolator();       public final static Interpolator ACC_INTERPOLATOR = new AccelerateInterpolator(               10.0f);       public final static Interpolator ANTI_INTERPOLATOR = new AnticipateInterpolator(               10.0f);       public final static Interpolator ANTI_OVER_SHOOT_INTERPOLATOR = new AnticipateOvershootInterpolator(               10.0f);       public final static Interpolator BOUNCE_INTEPOLATOR = new BounceInterpolator();       public final static Interpolator CYCLE_INTERPOLATOR = new CycleInterpolator(               5);       public final static Interpolator DEC_INTERPOLATOR = new DecelerateInterpolator(               10.0f);       public final static Interpolator LINEAR_INTERPOLATOR = new LinearInterpolator();       public final static Interpolator OVER_SHOOT_INTERPOLATOR = new OvershootInterpolator(               10.0f);   }   3、创建显示动画的activity  —— InterpolatorActivity.java , 内容如下:

[java]  view plain  copy import com.zt.xy.animation.utils.InterpolatorUtils;      import android.app.Activity;   import android.os.Bundle;   import android.view.View;   import android.view.View.OnClickListener;   import android.view.animation.Animation;   import android.view.animation.AnimationUtils;   import android.widget.Button;   import android.widget.ImageView;      public class InterpolatorActivity extends Activity implements OnClickListener {       private Button mAccDec;       private Button mAcc;       private Button mAnti;       private Button mAtiOverShoot;       private Button mBounce;       private Button mCycle;       private Button mDec;       private Button mLinear;       private Button mOverShoot;          Animation mTransAnim;       private ImageView mInterpolatorImg;          @Override       public void onCreate(Bundle savedInstanceState) {           super.onCreate(savedInstanceState);           setContentView(R.layout.interpolator_layout);           init();           mTransAnim = AnimationUtils.loadAnimation(this, R.anim.translate_anim);       }          private void init() {           mAccDec = (Button) findViewById(R.id.acc_dec_btn);           mAccDec.setOnClickListener(this);              mAcc = (Button) findViewById(R.id.acc_btn);           mAcc.setOnClickListener(this);              mAnti = (Button) findViewById(R.id.anti_btn);           mAnti.setOnClickListener(this);              mAtiOverShoot = (Button) findViewById(R.id.anti_over_shoot_btn);           mAtiOverShoot.setOnClickListener(this);              mBounce = (Button) findViewById(R.id.bounce_btn);           mBounce.setOnClickListener(this);              mCycle = (Button) findViewById(R.id.cycle_btn);           mCycle.setOnClickListener(this);              mDec = (Button) findViewById(R.id.dec_btn);           mDec.setOnClickListener(this);              mLinear = (Button) findViewById(R.id.linear_btn);           mLinear.setOnClickListener(this);              mOverShoot = (Button) findViewById(R.id.over_shoot_btn);           mOverShoot.setOnClickListener(this);              mInterpolatorImg = (ImageView) findViewById(R.id.anim_show_img);       }          @Override       protected void onPause() {           super.onPause();       }          @Override       protected void onResume() {           super.onResume();       }          public void onClick(View v) {           switch (v.getId()) {           case R.id.acc_dec_btn:               mTransAnim.setInterpolator(InterpolatorUtils.ACC_DEC_INERPOLATOR);               break;           case R.id.acc_btn:               mTransAnim.setInterpolator(InterpolatorUtils.ACC_INTERPOLATOR);               break;           case R.id.anti_btn:               mTransAnim.setInterpolator(InterpolatorUtils.ANTI_INTERPOLATOR);               break;           case R.id.anti_over_shoot_btn:               mTransAnim                       .setInterpolator(InterpolatorUtils.ANTI_OVER_SHOOT_INTERPOLATOR);               break;           case R.id.bounce_btn:               mTransAnim.setInterpolator(InterpolatorUtils.BOUNCE_INTEPOLATOR);               break;           case R.id.cycle_btn:               mTransAnim.setInterpolator(InterpolatorUtils.CYCLE_INTERPOLATOR);               break;           case R.id.dec_btn:               mTransAnim.setInterpolator(InterpolatorUtils.DEC_INTERPOLATOR);               break;           case R.id.linear_btn:               mTransAnim.setInterpolator(InterpolatorUtils.LINEAR_INTERPOLATOR);               break;           case R.id.over_shoot_btn:               mTransAnim                       .setInterpolator(InterpolatorUtils.OVER_SHOOT_INTERPOLATOR);               break;           }           cancleAnim();           startAnim();          }          private void cancleAnim() {           if (mTransAnim != null) {               mTransAnim.cancel();           }       }          private void startAnim() {           if (mTransAnim != null) {               mInterpolatorImg.startAnimation(mTransAnim);           }       }   }   当然在能运行程序前先准备好一张名为anim_show_img的图片放到drawable文件夹中。

开始的时候仅仅是显示一张图片,点击不同按钮则添加不同的插值器到TranslateAnimation中,等等,貌似我们忘记定义translate_anim 动画文件了——亲,点我探探translate_anim.xml究竟。

在layout文件中使用了很多字符串,下面的字串做个参考(具体字串,朋友们自由发挥)

[html]  view plain  copy <string name="acc_dec_str">accelerateDecelerate</string>       <string name="acc_str">accelerate</string>       <string name="anti_str">anticipate</string>       <string name="anti_over_shoot_str">anticipateOverShoot</string>       <string name="bounce_str">bounce</string>       <string name="cycle_str">cycle</string>       <string name="dec_str">decelerate</string>       <string name="linear_str">linear</string>       <string name="over_shoot_str">overShoot</string>   ok,大功告成!有问题请留言,谢谢!

转载请注明原文地址: https://www.6miu.com/read-2630918.html

最新回复(0)