模仿荷包启动动画——金钱掉落
不出所料,昨天各大媒体的科技类新闻版块全都被iPhone 7霸屏了,相信大家该看的东西基本都看得差不多了,我也不需要再补充什么。个人认为,这次iPhone 7最大的改变当属取消了3.5mm耳机接口,而全新设计的AirPods无线耳机,售价竟然高达1288元,每只耳机都够买一部红米的了,这分明是在抢钱嘛。不过我后来意识到,像这种没有线,又独立分开的耳机,是非常容易丢的,被阿猫阿狗之类的一叼就不见了,而且只要丢了一只另外一只也就报废了。于是我终于领悟到了真谛,原来AirPods耳机不是要靠买的,是要靠捡的啊。
今天给大家带来 咖枯 的投稿,一个简单有趣的动画,读完大概只需要5分钟时间,也希望大家都能够金钱满满~~~另外,今天又是周五了,先预祝大家周末愉快!
咖枯 的博客地址:
http://www.jianshu.com/users/dc68e267ea1c
用荷包App的时候发现启动动画做的挺好玩的,于是便模仿实现了一下。
gif效果图:
仔细观察,可以看出动画的执行分为两个阶段:
第一阶段为 硬币掉落。
第二阶段为 钱包反弹。
布局xml文件如下:
硬币掉落的过程中执行两种动画:位移 和 旋转。
位移动画使用了补间动画,xml文件如下:
旋转动画采用了重写 Animation 并利用 android.graphics.Camera 类来实现。
这里简单说下 animation 里面的 preTranslate 和 postTranslate 方法,preTranslate 是指在 rotateY前 平移,postTranslate 是指在 rotateY后 平移,注意他们参数是平移的距离,而不是平移目的地的坐标!
由于旋转是以 (0,0) 为中心的,所以为了把硬币的中心与 (0,0) 对齐,就要preTranslate(-centerX, -centerY),rotateY 完成后,调用postTranslate(centerX, centerY),再把图片移回来,这样看到的动画效果就是硬币从中心不停的旋转了。
最后同时执行以上两种动画,实现掉落旋转效果:
在执行硬币掉落的同时,启动一个 ValueAnimator 动画,来判断钱包反弹的时机。
最后执行钱包反弹效果动画,这里采用了 ObjectAnimator 。
这样一个简单的荷包启动动画效果就差不多出来了,唯一遗憾的是对钱包进行y轴缩放的时候会对整个y轴进行缩放,要想保持钱包底部不动,只有钱包上部反弹,暂时还没有想到什么好的方法,希望大家有想法的可以帮助一下。
项目地址(如果觉得还不错,记得star╰( ̄▽ ̄)╮哟~):
https://github.com/kaku2015/CoinWalletAnimator
如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。
欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号: