Android仿荷包APP啟動動畫
更新時間：2017年02月17日 18:24:33 作者：咖枯
這篇文章主要為大家詳細介紹了Android仿荷包APP啟動動畫的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用荷包App的時候發(fā)現(xiàn)啟動動畫做的挺好玩的，于是便模仿實現(xiàn)了一下。
gif效果圖：
animation.gif
實現(xiàn)思路：
仔細觀察，可以看出動畫的執(zhí)行分為兩個階段：
第一階段為硬幣掉落。
第二階段為錢包反彈。
布局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>
硬幣掉落：
硬幣掉落的過程中執(zhí)行兩種動畫，位移和旋轉。
位移動畫使用了補間動畫，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類來實現(xiàn)。
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后平移，注意他們參數(shù)是平移的距離,而不是平移目的地的坐標!
由于旋轉是以(0,0)為中心的,所以為了把硬幣的中心與(0,0)對齊,就要preTranslate(-centerX, -centerY), rotateY完成后,調(diào)用postTranslate(centerX, centerY),再把圖片移回來,這樣看到的動畫效果就是硬幣從中心不停的旋轉了。
最后同時執(zhí)行以上兩種動畫，實現(xiàn)掉落旋轉效果。
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);
｝
錢包反彈：
在執(zhí)行硬幣掉落的同時，啟動一個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動畫，并執(zhí)行錢包反彈效果
if (fraction >= 0.75) {
valueAnimator.cancel();
startWallet();
}
}});
valueAnimator.start();
｝
最后執(zhí)行錢包反彈效果動畫，這里采用了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());
// 同時執(zhí)行x，y軸縮放動畫
animatorSet.playTogether(objectAnimator1, objectAnimator2);
animatorSet.start();}
這樣一個簡單的荷包啟動動畫效果就差不多出來了，唯一遺憾的是對錢包進行y軸縮放的時候會對整個y軸進行縮放，要想保持錢包底部不動，只有錢包上部反彈，暫時還沒有想到什么好的方法，小弟不才還望大神賜教！謝謝！
完整源碼：
完整源碼在GitHub
如果覺得還不錯，記得star╰(￣▽￣)╮喲~
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Android開發(fā)中調(diào)用系統(tǒng)相冊上傳圖片到服務器OPPO等部分手機上出現(xiàn)短暫的顯示桌面問題的解決方法
這篇文章主要介紹了Android開發(fā)中調(diào)用系統(tǒng)相冊上傳圖片到服務器OPPO等部分手機上出現(xiàn)短暫的顯示桌面問題的解決方法,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了為什么不要在Flutter中使用全局變量，全局變量是公共變量，可以被Flutter程序中的每個方法和對象訪問，全局變量是局部變量的替代品，它們在方法中創(chuàng)建并在該方法中訪問2022-08-08
這篇文章主要為大家詳細介紹了Android實現(xiàn)獲取短信驗證碼并自動填寫功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
設備APP開發(fā)環(huán)境配置細節(jié)介紹
隨著工業(yè)自動化的不斷發(fā)展，設備APP也越來越重要，本文就設備APP開發(fā)軟件配置細節(jié)做一個深入詳解2022-09-09
Android的SurfaceView和TextureView介紹及使用示例
SurfaceView 是一種用于直接將圖形繪制到屏幕的Android組件,下面給大家分享SurfaceView使用示例,它展示了如何在 Android 應用中創(chuàng)建并使用,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了Android?殺死進程的相關資料,并整理了幾種實現(xiàn)方法，及具體實現(xiàn)的代碼，需要的朋友可以參考下2016-11-11
Android穩(wěn)定性：可遠程配置化的Looper兜底框架
這篇文章主要為大家介紹了Android穩(wěn)定性可遠程配置化的Looper兜底框架實例實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了Android Fresco圖片加載優(yōu)化的方案，幫助大家更好的理解和學習使用Android，感興趣的朋友可以了解下2021-03-03
這篇文章主要為大家詳細介紹了Android布局之幀布局FrameLayout ，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家詳細介紹了Android實現(xiàn)房貸計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01