前言
最近我们android开发组开启了内部交流的活动，各位同事都讲得很好。自己android知识不丰富，好在之前在youtube上看到过一个Google官方讲android动画的视频，便跟着学习，纪录笔记，讲给大家。
后来同事提议何不把手机演示制作成gif的样式，然后写成博客跟大家分享，大家以后想做什么功能的动画就看这个博客上有没有类似的，这样岂不是很好。我深以为然，这就是这系列博客的由来，希望对大家能有所帮助。
Youtube上视频地址
Github上代码地址
1 BitmapScaling
BitmapFactory.Options bitmapOptions = new BitmapFactory.Options();
bitmapOptions.inSampleSize = sampleSize;
Bitmap scaledBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.jellybean_statue, bitmapOptions);
ImageView scaledImageView = new ImageView(this);
scaledImageView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
scaledImageView.setImageBitmap(scaledBitmap);
container.addView(scaledImageView);
在上面的代码中，inSampleSize指定了最后得到图片和初始图片的尺寸比例。在得到最终图片的过程中，将会根据inSampleSize的值抽样读取像素，这样做的效率更高。
需要指出的是最后得到图片和初始图片的比例关系和inSampleSize成对数再取整的关系，对数的底为2。比如传入的inSampleSize为2，那么对2取对数为1，图片就缩小1倍，当传入的inSampleSize为3时，对2取对数再取整还是1，图片也缩小1倍。
程序运行后，如下面的图片所示：
BitmapScaling
2 RequestDuringLayout
这节课程主要告诉我们：在onLayout方法里面不要添加和移除view
我们都知道在onLayout方法里面将会对子元素进行位置摆放，当我们对子元素进行位置摆放完成以后，再添加或者移除元素，显然会导致新的变化难以得到显现。
RequestDuringLayout
3 ListViewAnimations
讲到如何优化ListView相比大家都很清楚，其中有一条就是复用不显示的view。由于手机上显示的ListView的条目是固定的，上下滑动的过程中，会有一些条目消失，一些条目展现。在这可以将消失的条目的view复用起来，用于显示新展现的条目。
大家一般都这么做着，可是在这需要指出的是：当ListView的条目有动画效果的时候，复用view需要特别注意
下面的动态图片很好地展示了这个问题：
ListViewAnimations_1
用户复用了view，会导致新出来的条目也带上了动画的效果。
对于这个问题，有两个解决方法：1、使用View Animation；2、设置TransientState。
使用View animation的时候，ListView内部会判断view上的动画有没有结束，没有结束的话则不会复用view。使用View animation也特别简单，下面一句代码就搞定了。
view.animate().setDuration(3000).alpha(0)
实现效果如下所示：
ListViewAnimations_2
设置TransientState则是给view设置一个标记，同样ListView发现view上有这个标记也就不会再复用这个view了，代码如下：
view.setHasTransientState(true);
实现效果如下所示：
ListViewAnimations_3
4 ListViewDeletion
对选中的条目进行动画删除，这里面也会涉及到一些问题，下面的动画很好地展示了这个问题。
ListViewDeletion_1
listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent,
final View view, int position, long id) {
boolean checked = listview.isItemChecked(position);
if (checked) {
mCheckedViews.add(view);
} else {
mCheckedViews.remove(view);
}
}
});
for (int i = 0; i < mCheckedViews.size(); ++i) {
final View checkedView = mCheckedViews.get(i);
checkedView.animate().setDuration(3000).alpha(0).withEndAction(
new Runnable() {
@Override
public void run() {
checkedView.setAlpha(1);
}
});
}
可以看到新出来的，没有选中的view也执行了动画效果，这里的动画是使用了view动画。在上面的代码中，将勾选的view添加到列表中，后来滑动ListView，会复用相应的view，从而导致动画出现了问题。
可以按照下面的方式解决这个问题：
- 先找出ListView中已经勾选的子元素的位置；
- 根据1中得到的位置，判断子条目是否正在显示，如果正在显示则对相应的view执行动画，否则的话直接在一定时间过后移除子条目。
SparseBooleanArray checkedItems = listview.getCheckedItemPositions();
int positionOnScreen = position - listview.getFirstVisiblePosition();
if (positionOnScreen >= 0 &&
positionOnScreen < listview.getChildCount()) {
final View view = listview.getChildAt(positionOnScreen);
// All set to fade this view out. Using ViewPropertyAnimator accounts
// for possible recycling of views during the animation itself
// (see the ListViewAnimations example for more on this).
view.animate().setDuration(3000).alpha(0).withEndAction(
new Runnable() {
@Override
public void run() {
view.setAlpha(1);
adapter.remove(item);
}
});
} else {
// Not animating the view, but don't delete it yet to avoid making the
// list shift due to offscreen deletions
v.postDelayed(new Runnable() {
@Override
public void run() {
adapter.remove(item);
}
}, 3000);
}
运行效果如下面动态图片所示：
ListViewDeletion_2
5 Bounce Animations
在这节课程中，讲述了三个知识点：
- 通过anim.setRepeatCount(ValueAnimator.INFINITE) 设置动画播放的次数；
- 通过anim.setRepeatMode(ValueAnimator.REVERSE) 设置动画重复播放的模式；
- 通过anim.setInterpolator(new AccelerateInterpolator()) 设置不同的插值器。
下面的两个动态图片，一个展示了线性插值器，一个展示了加速插值器。可以看到加速插值器更像我们日常生活中的弹性效果。
BounceAnimations_1
BounceAnimations_2
6 Property Animations
Property Animations是通过反射从而实现动画的，需要先设置需要变化的属性。当我们设置变化的为“rotation”的时候，android会通过反射技术找到view的setRotation(float rotation)方法，从而在插值器的影响下不断调用这个方法，从而实现了整个动画过程。Property Animations可以同时设置改变多个属性，AnimatorSet可以将多个动画连接起来。
// Spin the button around in a full circle
ObjectAnimator rotateAnimation =
ObjectAnimator.ofFloat(rotateButton, View.ROTATION, 360);
rotateAnimation.setRepeatCount(1);
rotateAnimation.setRepeatMode(ValueAnimator.REVERSE);
// Scale the button in X and Y. Note the use of PropertyValuesHolder to animate
// multiple properties on the same object in parallel.
PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat(View.SCALE_X, 2);
PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 2);
ObjectAnimator scaleAnimation = ObjectAnimator.ofPropertyValuesHolder(scaleButton, pvhX, pvhY);
scaleAnimation.setRepeatCount(1);
scaleAnimation.setRepeatMode(ValueAnimator.REVERSE);
// Run the animations above in sequence
AnimatorSet setAnimation = new AnimatorSet();
setAnimation.play(translateAnimation).after(alphaAnimation).before(rotateAnimation);
setAnimation.play(rotateAnimation).before(scaleAnimation);
动画效果，如下面图片所示：
PropertyAnimations
7 KeyFrame Animation
帧动画使用的情况也很多，帧动画实现起来也比较简单。
// Create the AnimationDrawable in which we will store all frames of the animation
final AnimationDrawable animationDrawable = new AnimationDrawable();
for (int i = 0; i < 10; ++i) {
animationDrawable.addFrame(getDrawableForFrameNumber(i), 300);
}
// Run until we say stop
animationDrawable.setOneShot(false);
imageview.setImageDrawable(animationDrawable);
// When the user clicks on the image, toggle the animation on/off
imageview.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (animationDrawable.isRunning()) {
animationDrawable.stop();
} else {
animationDrawable.start();
}
}
});
AnimationDrawable可以往里面添加各种Drawable并且规定它们的显示时间，从而完成了帧动画的设置。
展示效果如下所示：
KeyframeAnimation
8 CrossFading Animations
这节课讲述了如何使用TransitionDrawable来实现在两个drawable之间渐变转换，代码如下所示：
final ImageView imageview = (ImageView) findViewById(R.id.imageview);
// Create red and green bitmaps to cross-fade between
Bitmap bitmap0 = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888);
Bitmap bitmap1 = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap0);
canvas.drawColor(Color.RED);
canvas = new Canvas(bitmap1);
canvas.drawColor(Color.GREEN);
BitmapDrawable drawables[] = new BitmapDrawable[2];
drawables[0] = new BitmapDrawable(getResources(), bitmap0);
drawables[1] = new BitmapDrawable(getResources(), bitmap1);
// Add the red/green bitmap drawables to a TransitionDrawable. They are layered
// in the transition drawalbe. The cross-fade effect happens by fading one out and the
// other in.
final TransitionDrawable crossfader = new TransitionDrawable(drawables);
imageview.setImageDrawable(crossfader);
// Clicking on the drawable will cause the cross-fade effect to run. Depending on
// which drawable is currently being shown, we either 'start' or 'reverse' the
// transition, which determines which drawable is faded out/in during the transition.
imageview.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (mCurrentDrawable == 0) {
crossfader.startTransition(500);
mCurrentDrawable = 1;
} else {
crossfader.reverseTransition(500);
mCurrentDrawable = 0;
}
}
});
也可以在xml文件中直接定义TransitionDrawable，定义后直接当作drawable使用即可。代码如下所示：
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/image01"/>
<item android:drawable="@drawable/image02"/>
</transition>
先前转换调用startTransition(int durationMillis)，向后调用reverseTransition(int duration)，其中durationMillis指渐变的时间。
展示效果如下所示：
CrossFadingAnimations
9 Window Animations
一般在开启一个新的activity的时候可以设置相关动画，在Jellybean开始，可以设置缩放类型的和Thumbnail缩放类型。
// By default, launching a sub-activity uses the system default for window animations
Intent subActivity = new Intent(WindowAnimations.this, SubActivity.class);
startActivity(subActivity);
// Custom animations allow us to do things like slide the next activity in as we slide this activity out
// Using the AnimatedSubActivity also allows us to animate exiting that activity - see that activity for details
Intent subActivity = new Intent(WindowAnimations.this, AnimatedSubActivity.class);
// The enter/exit animations for the two activities are specified by xml resources
Bundle translateBundle = ActivityOptions.makeCustomAnimation(WindowAnimations.this, R.anim.slide_in_left, R.anim.slide_out_left).toBundle();
startActivity(subActivity, translateBundle);
// Starting in Jellybean, you can provide an animation that scales up the new activity from a given source rectangle
Intent subActivity = new Intent(WindowAnimations.this, AnimatedSubActivity.class);
Bundle scaleBundle = ActivityOptions.makeScaleUpAnimation(v, 0, 0, v.getWidth(), v.getHeight()).toBundle();
startActivity(subActivity, scaleBundle);
/ Starting in Jellybean, you can also provide an animation that scales up the new
// activity from a given bitmap, cross-fading between the starting and ending representations. Here, we scale up from a thumbnail image of the final sub-activity
BitmapDrawable drawable = (BitmapDrawable) thumbnail.getDrawable();
Bitmap bm = drawable.getBitmap();
Intent subActivity = new Intent(WindowAnimations.this, AnimatedSubActivity.class);
Bundle scaleBundle = ActivityOptions.makeThumbnailScaleUpAnimation(thumbnail, bm, 0, 0).toBundle();
startActivity(subActivity, scaleBundle);
展示效果如下所示：
WindowAnimations
10 View Animations
实现View Animations有两种方式：1、代码直接写；2、xml实现。
1、代码直接实现：
TranslateAnimation translateAnimation =
new TranslateAnimation(Animation.ABSOLUTE, 0,
Animation.RELATIVE_TO_PARENT, 1,
Animation.ABSOLUTE, 0, Animation.ABSOLUTE, 100);
translateAnimation.setDuration(1000);
translateButton.startAnimation(translateAnimation);
2、xml实现
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0" android:toXDelta="100%p"
android:fromYDelta="0" android:toYDelta="100"
android:duration="1000" />
translateButton.startAnimation(AnimationUtils.loadAnimation(ViewAnimations.this, R.anim.translate_anim));
展示效果如下所示：
ViewAnimations
为了避免文章图片过多，第一篇文章就讲述到这吧，如果觉得有点意思，可以继续阅读这个系列的另外两篇文章。
