Google官方动画教程1

前言

最近我们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,从而导致动画出现了问题。
可以按照下面的方式解决这个问题:

  1. 先找出ListView中已经勾选的子元素的位置;
  2. 根据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

在这节课程中,讲述了三个知识点:

  1. 通过anim.setRepeatCount(ValueAnimator.INFINITE) 设置动画播放的次数;
  2. 通过anim.setRepeatMode(ValueAnimator.REVERSE) 设置动画重复播放的模式;
  3. 通过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

为了避免文章图片过多,第一篇文章就讲述到这吧,如果觉得有点意思,可以继续阅读这个系列的另外两篇文章。

推荐阅读更多精彩内容