【移动开发】Ken Burns特效的幻灯片

本文翻译自《50 android hacks》


Ken Burns特效,是视频产品中使用的一种平移和缩放的静态图片的特效。

先看维基百科针对Ken Burns特效的介绍。

http://en.wikipedia.org/wiki/Ken_Burns_effect


要实现这个效果,需要使用NineOldAndroids库,这个库可以在旧版本上使用Android 3.0的动画库。

效果图



准备工作

这些动画在ImageView上面执行。动画执行的基本思路,当一个动画执行结束,另一个新的动画在另一个新的ImageView上面执行,循此往复。

主布局使用FrameLayout,其中放置一个ImageView。代码如下:

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContainer = new FrameLayout(this);
        mContainer.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
                LayoutParams.FILL_PARENT));

        mView = createNewView();
        mContainer.addView(mView);

        setContentView(mContainer);
    }

    private ImageView createNewView() {
        ImageView ret = new ImageView(this);
        ret.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
                LayoutParams.FILL_PARENT));
        ret.setScaleType(ScaleType.FIT_XY);
        ret.setImageResource(PHOTOS[mIndex]);
        mIndex = (mIndex + 1 < PHOTOS.length) ? mIndex + 1 : 0;

        return ret;
    }
存放图片资源的数组,代码如下:

    private static final int[] PHOTOS = new int[] { R.drawable.photo1,
            R.drawable.photo2, R.drawable.photo3, R.drawable.photo4,
            R.drawable.photo5, R.drawable.photo6 };
通过createNewView,创建一个用于显示下一张图片的ImageView对象。


编写动画

编写nextAnimation方法,这个方法用于设置动画并启动动画。代码如下:

private void nextAnimation() {
        AnimatorSet anim = new AnimatorSet();
        final int index = mRandom.nextInt(ANIM_COUNT);

        switch (index) {
        case 0:
            anim.playTogether(
                    ObjectAnimator.ofFloat(mView, "scaleX", 1.5f, 1f),
                    ObjectAnimator.ofFloat(mView, "scaleY", 1.5f, 1f));
            break;

        case 1:
            anim.playTogether(ObjectAnimator.ofFloat(mView, "scaleX", 1, 1.5f),
                    ObjectAnimator.ofFloat(mView, "scaleY", 1, 1.5f));
            break;

        case 2:
            AnimatorProxy.wrap(mView).setScaleX(1.5f);
            AnimatorProxy.wrap(mView).setScaleY(1.5f);
            anim.playTogether(ObjectAnimator.ofFloat(mView, "translationY",
                    80f, 0f));
            break;

        case 3:
        default:
            AnimatorProxy.wrap(mView).setScaleX(1.5f);
            AnimatorProxy.wrap(mView).setScaleY(1.5f);
            anim.playTogether(ObjectAnimator.ofFloat(mView, "translationX", 0f,
                    40f));
            break;
        }

        anim.setDuration(3000);
        anim.addListener(this);
        anim.start();
    }


动画事件监听

AnimatorProxy类,是NineOldAndroids库中的一个工具类,用于修改View对象的属性。视图的属性随时间的推移而改变。之所以使用AnimatorProxy类,是因为在Android 3.0以下版本,有些属性没有setters或getters方法。

同时,需要设置动画的监听器,一个动画执行完毕,另一个新的动画在另一个新的ImageView上执行。

@Override
    public void onAnimationEnd(Animator animator) {
        mContainer.removeView(mView);
        mView = createNewView();
        mContainer.addView(mView);
        nextAnimation();
    }
在Activity的onResume回调中,调用nextAnimation方法。这样,在进入Activity后,Ken Burns幻灯片就开始执行了。


后记

Android所支持的动画类型如下:

  • Property Animation 属性动画(Android 3.0新增)
  • Tween Animation 补间动画
  • Frame Animation 帧动画

NineOldAndroids库,就是Android 3.0提供的Property Animation框架,翻译成中文叫 属性动画。这个动画框架对比于低版本的动画框架是做了非常多的改进的,可见Google真是用心良苦。

旧版本动画的缺点如下:

  • 只支持View对象的动画效果。属性动画,不仅仅支持试图对象,而是支持一切“对象”。
  • 只支持移动,缩放,旋转,渐变等效果。
  • 只是改变View对象的视觉效果,而不是改变View对象的真实属性。

Property Animation的应用十分广泛,它是非常值得深入学习和研究的。尽管互联网上已经有很多人对Property Animation进行了总结和归纳,但是,凡事还是要自己去研究,才能做到理解深刻。


参考资料

www.nasatrainedmonkeys.com/portfolio/feedtv/

https://github.com/JakeWharton/NineOldAndroids

http://en.wikipedia.org/wiki/Ken_Burns_effect

http://android-developers.blogspot.com.ar/2011/02/animation-in-honeycomb.html

http://android-developers.blogspot.com.ar/2011/05/ introducing-viewpropertyanimator.html http://android-developers.blogspot.com.ar/2011/05/ introducing-viewpropertyanimator.html


源码下载

百度网盘 http://pan.baidu.com/s/1qWwO0bU

  • 10
    点赞
  • 94
    收藏
    觉得还不错? 一键收藏
  • 22
    评论
Ken Burns effect效果自动移动来显示完整图片。你可以自定义移动路径,如:从左到有、从上到下、从左下角到右上角、从右上角到左下角等等,并且这些路径可以组合使用项目地址:https://github.com/AlbertGrobas/MovingImageView 效果图:如何使用:创建图片<net.grobas.view.MovingImageView             android:id="@ id/image"             android:layout_width="match_parent"             android:layout_height="250dp"             android:clickable="true"             android: 添加移动监听image = (MovingImageView) findViewById(R.id.image); image.getMovingAnimator().addListener(new Animator.AnimatorListener() {             @Override             public void onAnimationStart(Animator animation) {                 Log.i("Sample MovingImageView", "Start");             }             @Override             public void onAnimationEnd(Animator animation) {                 Log.i("Sample MovingImageView", "End");             }             @Override             public void onAnimationCancel(Animator animation) {                 Log.i("Sample MovingImageView", "Cancel");             }             @Override             public void onAnimationRepeat(Animator animation) {                 Log.i("Sample MovingImageView", "Repeat");             }         });3. 停止和重新开始image.getMovingAnimator().pause();//停止 image.getMovingAnimator().resume();//重新开始注意:这俩个功能只能在Android 4.4以上使用。4. 设置自定义移动路径image.getMovingAnimator().addCustomMovement().addDiagonalMoveToDownRight().addHorizontalMoveToLeft().addDiagonalMoveToUpRight()                     .addVerticalMoveToDown().addHorizontalMoveToLeft().addVerticalMoveToUp().start();DiagonalMoveToDownRight:从左上角到右下角HorizontalMoveToLeft:从右到左DiagonalMoveToUpRight:从左下角到右上角清除自定义路径:image.getMovingAnimator().clearCustomMovement();

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 22
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值