動畫入門（登陸動畫）

2021-09-25 14:37:42 字數 3851 閱讀 2532

最近專案不急，所以有時間來把最近學習的內容總結一下，並將知識做個全方面的總結，有助於自己在工作中更加深入的體會知識內容，今天就把學習的乙個簡單的登陸動畫效果做個簡單的實現，做成了乙個gif圖的形式，由於gif圖有大小限制，所以只能看這麼模糊的了。。。。

1.在這裡我對這個登陸介面動畫做個簡單的描述，這裡是將乙個小球從頂部向下移動到底部，並且伴隨著小球大小的變化，所以在下降的過程中伴隨著平移、縮放兩種動畫。

//第一部分的動畫效果展示

//平移動畫


objectanimator animator = objectanimator.offloat(ivball, "translationy", 0, 1200);


//設定動畫時間


animator.setduration(2500);


animator.setinterpolator(new anticipateovershootinterpolator());


//放大動畫


objectanimator scale = objectanimator.offloat(ivball, "scalex", 0.5f, 1.5f);


scale.setduration(2500);


//放大y軸的大小


objectanimator scaley = objectanimator.offloat(ivball, "scaley", 0.5f, 1.5f);


scaley.setduration(2500);
注意部分：這裡的我是利用屬性動畫實現的效果，順便說下屬性動畫和檢視動畫的區別：簡單的可以理解為屬性動畫改變的是控制項的屬性值，即如果你移動控制項，那麼控制項的位置也發生了改變；檢視動畫則是對於視覺上發生了位置的偏移，並沒有造成屬性的改變，可以理解為控制項視覺效果的移動。

2.接下來是要展示乙個上下跳動的動畫效果，這裡要設定的是乙個迴圈三次執行的動畫，並且伴隨著動畫的進行，小球要變成你需要的圖示，這裡主要是監聽動畫的執行過程，在執行中途替換資源。

//第二部分的動畫效果展示

//上下跳動三次的動畫


objectanimator txanimation = objectanimator.offloat(ivball, "translationy", 1200, 1000);


//設定時常為1秒鐘


txanimation.setduration(1000);


txanimation.setrepeatmode(valueanimator.reverse);


//設定重複三次


txanimation.setrepeatcount(3);


//設定在動畫執行中小球變為圖示


//小球迴圈動畫的回應


txanimation.addlistener(new animator.animatorlistener() 


@override


public void onanimationend(animator animation) 


@override


public void onanimationcancel(animator animation) 


@override


public void onanimationrepeat(animator animation) 


}});
3.然後是乙個向上的並且圖示變大的動畫效果，這個向上的動畫和1是差不多的方法，只是反過來執行而已，接下來就是登陸布局的顯示，在圖示上公升的過程中，延遲載入登陸介面的動畫，做到乙個差異性展示。

//第三部分**展示

//將圖示放大到1.5倍


objectanimator scaledh = objectanimator.offloat(ivball, "scaley", 1.5f, 3f);


scaledh.setduration(2000);


objectanimator scaled = objectanimator.offloat(ivball, "scalex", 1.5f, 3f);


scaled.setduration(2000);


//設定移動的距離


objectanimator animatorball = objectanimator.offloat(ivball, "translationy", 1200, 0);


animatorball.setduration(2000);


//設定對話方塊開啟的順序


objectanimator llanimation = objectanimator.offloat(lluserinfo, "scalex", 0, 1);


llanimation.setstartdelay(1500);


//延遲0.5s載入登入框資訊


llanimation.setduration(500);


//y軸移動距離


objectanimator llanimationy = objectanimator.offloat(lluserinfo, "scaley", 0, 1);


llanimationy.setstartdelay(1500);


//延遲0.5s載入登入框資訊


llanimationy.setduration(500);


//設定登入框顯示


llanimation.addlistener(new animator.animatorlistener() 


}@override


public void onanimationend(animator animation) 


@override


public void onanimationcancel(animator animation) 


@override


public void onanimationrepeat(animator animation) 


});
//注意事項：這裡的步驟和1基本相似，但是我們在顯示登入框的時候做了調整，當圖示移動0.5s之後，我們再將登入框顯示，並去做放大動畫（0.5——>1）,這樣來形成乙個差異感，同時監聽登入框開始時的動畫，來顯示登入框。

4.當圖示上公升完成的時候，我們需要將圖示向左平移，然後顯示登陸的標題資訊。

//將圖示左移，並顯示內容


objectanimator leftanimator = objectanimator.offloat(ivball, "translationx", 0, -300);


//延遲兩秒，讓上述動畫執行完成


leftanimator.setstartdelay(2000);


leftanimator.setduration(500);
//最後一步沒什麼難度，就是將圖示移動到左側，並在動畫前顯示標題內容。

總結：這裡我主要用的時屬性動畫去做的效果，當然檢視動畫同樣可以作出相同的效果。最後我要說的一點是如何將這些單獨的動畫組合起來：

//設定向下的動畫


animatorset set = new animatorset();


animatorset.builder builder = set.play(animator);


builder.with(a).with(b).before(c).after(d);


set.start();
這裡我做了乙個簡單的set，在上述的**中執行順序為d到ab（同時執行）到c，當上乙個動畫未執行時，或者未執行完成時，下乙個動畫是無法執行的，通過builder和set我們就可以將動畫繫結起來了，完成最終想要實現的動畫效果了。

《名偵探柯南》動畫登陸bilibili

4月30日晚間，bilibili官方宣布 名偵探柯南 tv動畫正式登陸bilibili。資料顯示，名偵探柯南 改編自青山剛昌創作的 於 週刊少年sunday 上的同名漫畫，於1996年1月8日開播。這是一部經典的童年系列動畫之一，它主要講述了主角工藤新一被黑衣人偷襲之後，在昏迷狀態下被灌下毒藥變成小...

Web動畫 SVG 線條動畫入門

通常我們說的 web 動畫，包含了三大類。個人認為 3 種動畫各有優劣，實際應用中根據掌握情況作出取捨，本文討論的是我認為 svg 中在實際專案中非常有應用價值 svg 線條動畫。svg 線條動畫，在一些特定的場合下可以解決使用 css 無法完成的動畫。尤其是在進度條方面，看看最近專案裡的乙個小需求...

屬性動畫入門

public class basesettingactivity extends activity if e1.getrawx e2.getrawx 0 if e1.getrawx e2.getrawx 0 return super.onfling e1,e2,velocityx,velocityy...