帧动画的使用

  • 在drawable中新建资源文件,使用animation_list定义动画,animation-list定义的动画将顺次从上往下显示item内的图片,设置oneshot=false则反复循环执行,true则执行一次
    1
    2
    3
    4
    5
    6
    7
    <?xml version="1.0" encoding="utf-8"?>
    <animation-list android:oneshot="false" xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/anim_1" android:duration="100"/>
    <item android:drawable="@drawable/anim_2" android:duration="100"/>
    <item android:drawable="@drawable/anim_3" android:duration="100"/>
    <item android:drawable="@drawable/anim_4" android:duration="100"/>
    </animation-list>
  • 在布局文件中直接使用ImageView,将上一步写好的动画通过src或background引用
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FrameAnimationActivity">
    <ImageView
    android:id="@+id/frame_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/frame_anim"/>
    </LinearLayout>
  • 在Activity中启动动画
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    public class FrameAnimationActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_frame_animation);
    ImageView imageView = findViewById(R.id.frame_image);
    imageView.setImageResource(R.drawable.frame_anim);
    AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
    animationDrawable.start();
    }
    }

  • 效果图

补间动画(视图动画)的使用

实现淡入淡出效果,旋转效果,缩放效果,位移效果

  • 在res目录下新建anim资源目录,并在anim中分别新建动画资源文件
  1. tween_alpha_anim.xml
    1
    2
    3
    4
    5
    6
    7
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="2000"/>
    </set>
  2. tween_roate_anim.xml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
    android:fromDegrees="0"
    android:toDegrees="-650"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="3000"
    android:fillAfter="true">
    </rotate>
    </set>
  3. tween_scale_anim.xml
1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.0"
android:toXScale="1.4"
android:fromYScale="0.0"
android:toYScale="1.4"
android:pivotX="50"
android:pivotY="50"
android:duration="700" />
</set>
  1. tween_translate_anim.xml
1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="320"
android:toXDelta="0"
android:fromYDelta="480"
android:toYDelta="0"
android:duration="5000"/>
</set>
  • 在布局文件中放入一个ImageView,和按钮用来显示和切换动画
  • 在Activity中实现切换,加载并开启动画
    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
    public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Button alpha = findViewById(R.id.alpha);
    Button scale = findViewById(R.id.scale);
    Button translate = findViewById(R.id.translate);
    Button roate = findViewById(R.id.roate);
    alpha.setOnClickListener(this);
    scale.setOnClickListener(this);
    translate.setOnClickListener(this);
    roate.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
    switch (v.getId()){
    case R.id.alpha:setAnimation(R.anim.tween_alpha_anim);break;
    case R.id.scale:setAnimation(R.anim.tween_scale_anim);break;
    case R.id.translate:setAnimation(R.anim.tween_translate_anim);break;
    case R.id.roate:setAnimation(R.anim.tween_roate_anim);break;
    }
    }

    private void setAnimation(int ResourceId) {
    Animation animation = AnimationUtils.loadAnimation(this,ResourceId);
    ImageView imageView = findViewById(R.id.imageView);
    imageView.startAnimation(animation);
    }

    }

  • 效果图

属性动画

  • 实现边先小后大边摇晃的动画效果
    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
    public class AnimationActivity extends AppCompatActivity {

    ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_animation);
    imageView=findViewById(R.id.imageView2);
    initAnimation();
    }
    private void initAnimation(){
    final AnimatorSet scaleAnimatorSet = new AnimatorSet();
    imageView.setPivotX(imageView.getWidth()+250);
    imageView.setPivotY(imageView.getWidth()+250);
    ObjectAnimator scaleX = ObjectAnimator.ofFloat(imageView,"scaleX",0.4f,1,0.4f);
    ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView,"scaleY",0.4f,1,0.4f);
    scaleX.setRepeatCount(ValueAnimator.INFINITE);
    scaleY.setRepeatCount(ValueAnimator.INFINITE);
    scaleAnimatorSet.playTogether(scaleX.setDuration(2000),scaleY.setDuration(2000));
    scaleAnimatorSet.start();
    imageView.setAnimation(shakeAnimation(6));
    }
    public static Animation shakeAnimation(int counts) {
    Animation rotateAnimation = new RotateAnimation(0, 20, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    rotateAnimation.setInterpolator(new CycleInterpolator(counts));
    rotateAnimation.setRepeatCount(-1);
    rotateAnimation.setDuration(3000);
    return rotateAnimation;
    }
    }

  • 效果图

具体动画属性,请查看官方文档

Android官方文档