模仿荷包启动动画——金钱掉落

模仿荷包启动动画——金钱掉落


不出所料,昨天各大媒体的科技类新闻版块全都被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




模仿荷包启动动画——金钱掉落


如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。


欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号:

模仿荷包启动动画——金钱掉落