动画的详解
介绍总览 https://www.jianshu.com/p/35d25cc205e7
补间动画
介绍 https://www.jianshu.com/p/733532041f46
属性:
其中AnimationSet是其余几种以及其他AnimationSet的组合
基本属性:
其中,
Duration:持续时间,单位是毫秒
Interpolator:插值器
插值器列表
Alpha属性
Rorate属性
Scale属性
Translate 属性
AnimationSet
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@[package:]anim/interpolator_resource"
android:shareInterpolator=["true" | "false"] >
<alpha
android:fromAlpha="float"
android:toAlpha="float" />
<scale
android:fromXScale="float"
android:toXScale="float"
android:fromYScale="float"
android:toYScale="float"
android:pivotX="float"
android:pivotY="float" />
<translate
android:fromXDelta="float"
android:toXDelta="float"
android:fromYDelta="float"
android:toYDelta="float" />
<rotate
android:fromDegrees="float"
android:toDegrees="float"
android:pivotX="float"
android:pivotY="float" />
<set>
...
</set></set>
示例
alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="0"
android:toAlpha="1"
>
</alpha>
rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
>
<!-- fromDegrees 角度 -->
<!-- 旋转中心点 pivotX pivotY-->
</rotate>
scale.xml
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromXScale="1"
android:toXScale="1.5"
android:fromYScale="1"
android:toYScale="0.5"
android:pivotY="50%"
android:pivotX="50%"
>
<!--toXScale 放大的倍数 1.5 放大 0.5 缩小-->
</scale>
translate.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromYDelta="0"
android:toYDelta="200"
android:fromXDelta="0"
android:toXDelta="200"
>
</translate>
activity中的代码
package com.fenghongzhang.anim.tween;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.fenghongzhang.anim.R;
public class TweenActivity extends AppCompatActivity {
private Button btn;
private Button btn1;
private Button btn2;
private Button btn3;
private ImageView img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tween);
initView();
}
public void btn(View view) {
Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
img.startAnimation(animation);
}
public void btn1(View view) {
Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
img.startAnimation(animation);
}
public void btn2(View view) {
Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
img.startAnimation(animation);
}
public void btn3(View view) {
Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
img.startAnimation(animation);
}
private void initView() {
btn = (Button) findViewById(R.id.btn);
btn1 = (Button) findViewById(R.id.btn1);
btn2 = (Button) findViewById(R.id.btn2);
btn3 = (Button) findViewById(R.id.btn3);
img = (ImageView) findViewById(R.id.img);
}
public void btn4(View view) {
AnimationSet animationSet = new AnimationSet(true);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
Animation animation2 = AnimationUtils.loadAnimation(this, R.anim.scale);
animationSet.addAnimation(animation);
animationSet.addAnimation(animation2);
img.startAnimation(animationSet);
}
//动态创建动画
public void btn5(View view) {
TranslateAnimation translateAnimation = new TranslateAnimation(0, 300, 0, 300);
translateAnimation.setDuration(3000);
translateAnimation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
Toast.makeText(TweenActivity.this, "start", Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationEnd(Animation animation) {
Toast.makeText(TweenActivity.this, "end", Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationRepeat(Animation animation) {
Toast.makeText(TweenActivity.this, "重复", Toast.LENGTH_SHORT).show();
}
});
img.startAnimation(translateAnimation);
}
}
逐帧动画
介绍 https://www.jianshu.com/p/225fe1feba60
方式一
具体使用
- 步骤1:将动画资源(即每张图片资源)放到 drawable文件夹里
技巧:
找到自己需要的gif动画
用 gif分解软件(如 GifSplitter)将 gif 分解成一张张图片即可
- 步骤:设置 & 启动 动画
设置 & 启动 逐帧动画有两种方式:在XML / Java代码。
在 res/drawable的文件夹里创建动画效果.xml文件
设置动画资源(图片资源)
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/a1"></item>
<item android:drawable="@drawable/a2"></item>
<item android:drawable="@drawable/a3"></item>
<item android:drawable="@drawable/a4"></item>
<item android:drawable="@drawable/a5"></item>
<item android:drawable="@drawable/a6"></item>
<item android:drawable="@drawable/a7"></item>
<item android:drawable="@drawable/a8"></item>
<item android:drawable="@drawable/a9"></item>
</animation-list>
- 步骤:在Java代码中载入 & 启动动画
package com.fenghongzhang.anim;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private Button start;
private Button stop;
private ImageView img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
public void start(View view) {
img.setImageResource(R.drawable.pikaqiu);
AnimationDrawable drawable = (AnimationDrawable) img.getDrawable();
drawable.start();
}
public void stop(View view) {
AnimationDrawable drawable = (AnimationDrawable) img.getDrawable();
drawable.stop();
}
private void initView() {
start = (Button) findViewById(R.id.start);
stop = (Button) findViewById(R.id.stop);
img = (ImageView) findViewById(R.id.img);
}
}
方式2:在Java代码中实现
package com.fenghongzhang.anim;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.widget.Button;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private Button start;
private Button stop;
private ImageView img;
private AnimationDrawable animationDrawable;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//<-- 直接从drawable文件夹获取动画资源(图片) -->
animationDrawable = new AnimationDrawable();
for (int i = 1; i <= 9; i++) {
int id = getResources().getIdentifier("a" + i, "drawable", getPackageName());
Drawable drawable = getResources().getDrawable(id);
animationDrawable.addFrame(drawable, 100);
}
}
public void start(View view) {
img.setImageResource(R.drawable.pikaqiu);
AnimationDrawable drawable = (AnimationDrawable) img.getDrawable();
drawable.start();
}
public void stop(View view) {
AnimationDrawable drawable = (AnimationDrawable) img.getDrawable();
drawable.stop();
}
private void initView() {
start = (Button) findViewById(R.id.start);
stop = (Button) findViewById(R.id.stop);
img = (ImageView) findViewById(R.id.img);
}
public void btn1(View view) {
//只执行一次. 不会停止就停止了
// animationDrawable.setOneShot(true);
img.setImageDrawable(animationDrawable);
// animationDrawable.stop();
animationDrawable.start();
}
public void btn2(View view) {
// animationDrawable.setOneShot(true);
animationDrawable.stop();
}
}