Android仿荷包APP启动动画
用荷包app的时候发现启动动画做的挺好玩的,于是便模仿实现了一下。
gif效果图:
animation.gif
实现思路:
仔细观察,可以看出动画的执行分为两个阶段:
第一阶段为硬币掉落。
第二阶段为钱包反弹。
布局xml文件如下:
<?xml version="1.0" encoding="utf-8"?> <framelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <imageview android:id="@+id/coin_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@mipmap/coin"/> <imageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginbottom="70dp" android:layout_marginleft="70dp" android:src="@mipmap/version"/> <imageview android:id="@+id/wallet_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@mipmap/wallet"/> <button android:id="@+id/start_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center|bottom" android:layout_marginbottom="10dp" android:text="start"/> </framelayout>
硬币掉落:
硬币掉落的过程中执行两种动画,位移和旋转。
位移动画使用了补间动画,xml文件如下:
<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromydelta="-50%p" android:interpolator="@android:anim/accelerate_interpolator" android:toydelta="0%"/>
旋转动画采用了重写animation并利用android.hardware.camera类来实现。
public class threedrotateanimation extends animation { int centerx, centery; camera camera = new camera(); @override public void initialize(int width, int height, int parentwidth, int parentheight) { super.initialize(width, height, parentwidth, parentheight); // 中心点坐标 centerx = width / 2; centery = height / 2; setduration(500); setinterpolator(new linearinterpolator()); } @override protected void applytransformation(float interpolatedtime, transformation t) { final matrix matrix = t.getmatrix(); camera.save(); // 绕y轴旋转 camera.rotatey(360 * interpolatedtime); camera.getmatrix(matrix); // 设置翻转中心点 matrix.pretranslate(-centerx, -centery); matrix.posttranslate(centerx, centery); camera.restore(); } }
这里简单说下animation里面的pretranslate和posttranslate方法,pretranslate是指在rotatey前平移,posttranslate是指在rotatey后平移,注意他们参数是平移的距离,而不是平移目的地的坐标!
由于旋转是以(0,0)为中心的,所以为了把硬币的中心与(0,0)对齐,就要pretranslate(-centerx, -centery), rotatey完成后,调用posttranslate(centerx, centery),再把图片移回来,这样看到的动画效果就是硬币从中心不停的旋转了。
最后同时执行以上两种动画,实现掉落旋转效果。
private void startcoin() { // 掉落 animation animationtranslate = animationutils.loadanimation(this,r.anim.anim_top_in); // 旋转 threedrotateanimation animation3d = new threedrotateanimation(); animation3d.setrepeatcount(10); animationset animationset = new animationset(true); animationset.setduration(800); animationset.addanimation(animation3d); animationset.addanimation(animationtranslate); mcoiniv.startanimation(animationset); }
钱包反弹:
在执行硬币掉落的同时,启动一个valueanimator动画,来判断钱包反弹的时机。
private void setwallet() { final valueanimator valueanimator = valueanimator.offloat(0, 1); valueanimator.setduration(800); valueanimator.addupdatelistener(new valueanimator.animatorupdatelistener() { @override public void onanimationupdate(valueanimator animation) { float fraction = animation.getanimatedfraction(); // 大概掉落到钱包的上边缘位置的时候,取消valueanimator动画,并执行钱包反弹效果 if (fraction >= 0.75) { valueanimator.cancel(); startwallet(); } }}); valueanimator.start(); }
最后执行钱包反弹效果动画,这里采用了objectanimator 。
private void startwallet() { // x轴缩放 objectanimator objectanimator1 = objectanimator.offloat(mlogoiv, "scalex", 1, 1.1f, 0.9f, 1); objectanimator1.setduration(600); // y轴缩放 objectanimator objectanimator2 = objectanimator.offloat(mlogoiv, "scaley", 1, 0.75f, 1.25f, 1); objectanimator2.setduration(600); animatorset animatorset = new animatorset(); animatorset.setinterpolator(new linearinterpolator()); // 同时执行x,y轴缩放动画 animatorset.playtogether(objectanimator1, objectanimator2); animatorset.start();}
这样一个简单的荷包启动动画效果就差不多出来了,唯一遗憾的是对钱包进行y轴缩放的时候会对整个y轴进行缩放,要想保持钱包底部不动,只有钱包上部反弹,暂时还没有想到什么好的方法,小弟不才还望大神赐教!谢谢!
完整源码:
完整源码在github
如果觉得还不错,记得star╰( ̄▽ ̄)╮哟~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。