第六单元
2020-12-12 本文已影响0人
贤兵
一、android中的动画
动画分类:
1、帧动画
2、补间动画
3、属性动画
二、帧动画
类似于电影，一张张图片连续播放
1、xml方式
anim.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/anim1" android:duration="100"/>
<item android:drawable="@drawable/anim2" android:duration="100"/>
<item android:drawable="@drawable/anim3" android:duration="100"/>
<item android:drawable="@drawable/anim4" android:duration="100"/>
<item android:drawable="@drawable/anim5" android:duration="100"/>
<item android:drawable="@drawable/anim6" android:duration="100"/>
<item android:drawable="@drawable/anim7" android:duration="100"/>
<item android:drawable="@drawable/anim8" android:duration="100"/>
<item android:drawable="@drawable/anim9" android:duration="100"/>
<item android:drawable="@drawable/anim10" android:duration="100"/>
<item android:drawable="@drawable/anim11" android:duration="100"/>
<item android:drawable="@drawable/anim12" android:duration="100"/>
</animation-list>
anim1.gif
anim2.gif
anim3.gif
anim4.gif
anim5.gif
anim6.gif
anim7.gif
anim8.gif
anim9.gif
anim10.gif
anim11.gif
anim12.gif
2、代码方式
activity_main.xml
<?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"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="@+id/start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="start" />
<Button
android:id="@+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="stop" />
<Button
android:id="@+id/java_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="java code frame animation" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/image_view" />
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.image_view);
imageView.setImageResource(R.drawable.anim);
findViewById(R.id.start).setOnClickListener(v -> {
AnimationDrawable animationDrawable = (AnimationDrawable)imageView.getDrawable();
if (animationDrawable != null && !animationDrawable.isRunning()) {
animationDrawable.start();
}
});
findViewById(R.id.stop).setOnClickListener(v -> {
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getDrawable();
if (animationDrawable != null && animationDrawable.isRunning()) {
animationDrawable.stop();
}
});
findViewById(R.id.java_code).setOnClickListener(v -> {
frameAnimation();
});
}
private void frameAnimation() {
AnimationDrawable animationDrawable = new AnimationDrawable();
animationDrawable.addFrame(getDrawable(R.drawable.anim1), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim2), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim3), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim4), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim5), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim6), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim7), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim8), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim9), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim10), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim11), 100);
animationDrawable.addFrame(getDrawable(R.drawable.anim12), 100);
animationDrawable.setOneShot(true);
imageView.setImageDrawable(animationDrawable);
animationDrawable.start();
}
}
二、补间动画
图片.png
其中AnimationSet是其余几种以及其他AnimationSet的组合
基本属性：
图片.png
其中，
Duration：持续时间，单位是毫秒
Interpolator：插值器
插值器列表
图片.png
Alpha属性
图片.png
Rorate属性
图片.png
Scale属性
图片.png
Translate 属性
图片.png
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="1000"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromAlpha="0"
android:toAlpha="1"
/>
rorate.xml
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromDegrees="90"
android:toDegrees="180"
android:pivotX="50%"
android:pivotY="50%"/>
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="1.5"
android:pivotX="50%"
android:pivotY="50%"
/>
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:fromXDelta="300"
android:fromYDelta="300"
android:toXDelta="200"
android:toYDelta="200" />
activity_main.xml
<?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"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="@+id/image_view"
android:src="@drawable/ic_launcher" />
<Button
android:id="@+id/alpha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="alpha" />
<Button
android:id="@+id/scale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="scale" />
<Button
android:id="@+id/translate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="translate" />
<Button
android:id="@+id/rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="rotate" />
<Button
android:id="@+id/animation_set"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="animation_set" />
<Button
android:id="@+id/java_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="java_code" />
<Button
android:id="@+id/serial_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="serial_play" />
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.image_view);
findViewById(R.id.alpha).setOnClickListener(v -> {
alpha();
});
findViewById(R.id.scale).setOnClickListener(v -> {
scale();
});
findViewById(R.id.translate).setOnClickListener(v -> {
translate();
});
findViewById(R.id.rotate).setOnClickListener(v -> {
rotate();
});
findViewById(R.id.animation_set).setOnClickListener(v -> {
animation_set();
});
findViewById(R.id.java_code).setOnClickListener(v -> {
java_code();
});
findViewById(R.id.serial_play).setOnClickListener(v -> {
serial_play();
});
}
private void alpha() {
Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
imageView.startAnimation(animation);
}
private void scale() {
Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
imageView.startAnimation(animation);
}
private void translate() {
Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate);
imageView.startAnimation(animation);
}
private void rotate() {
Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
imageView.startAnimation(animation);
}
private void animation_set() {
AnimationSet animationSet = new AnimationSet(true);
Animation alpha = AnimationUtils.loadAnimation(this, R.anim.alpha);
Animation scale = AnimationUtils.loadAnimation(this, R.anim.scale);
Animation translate = AnimationUtils.loadAnimation(this, R.anim.translate);
Animation rotate = AnimationUtils.loadAnimation(this, R.anim.rotate);
animationSet.addAnimation(alpha);
animationSet.addAnimation(scale);
animationSet.addAnimation(translate);
animationSet.addAnimation(rotate);
imageView.startAnimation(animationSet);
}
private void java_code() {
// AlphaAnimation animation = new AlphaAnimation(0, 1);
// ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
// TranslateAnimation animation = new TranslateAnimation(100, 100, 200, 300);
RotateAnimation animation = new RotateAnimation(0, 135);
animation.setDuration(1000);
animation.setInterpolator(new LinearInterpolator());
animation.setRepeatMode(Animation.REVERSE);
animation.setRepeatCount(2);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
Log.i("Simon", "onAnimationStart");
}
@Override
public void onAnimationEnd(Animation animation) {
Log.i("Simon", "onAnimationEnd");
}
@Override
public void onAnimationRepeat(Animation animation) {
Log.i("Simon", "onAnimationRepeat");
}
});
imageView.startAnimation(animation);
}
private void serial_play() {
anim1();
}
private void anim1() {
AlphaAnimation animation = new AlphaAnimation(0, 1);
animation.setDuration(1000);
animation.setInterpolator(new LinearInterpolator());
animation.setRepeatMode(Animation.REVERSE);
animation.setRepeatCount(2);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
Log.i("Simon", "onAnimationStart");
}
@Override
public void onAnimationEnd(Animation animation) {
Log.i("Simon", "onAnimationEnd");
anim2();
}
@Override
public void onAnimationRepeat(Animation animation) {
Log.i("Simon", "onAnimationRepeat");
}
});
imageView.startAnimation(animation);
}
private void anim2() {
ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2);
animation.setDuration(1000);
animation.setInterpolator(new LinearInterpolator());
animation.setRepeatMode(Animation.REVERSE);
animation.setRepeatCount(2);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
Log.i("Simon", "onAnimationStart");
}
@Override
public void onAnimationEnd(Animation animation) {
Log.i("Simon", "onAnimationEnd");
}
@Override
public void onAnimationRepeat(Animation animation) {
Log.i("Simon", "onAnimationRepeat");
}
});
imageView.startAnimation(animation);
}
}
