墨迹天气3.0引导动画
生活随笔
收集整理的這篇文章主要介紹了
墨迹天气3.0引导动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?實現墨跡天氣向上滑動的viewpager使用的開源庫ViewPager-Android。ViewPager-Android開源庫設置app:orientation定義滑動方向。
<?xml?version="1.0"?encoding="utf-8"?>?? <set?xmlns:android="http://schemas.android.com/apk/res/android"?>?? ????<scale?? ????????android:duration="2000"?? ????????android:fillAfter="false"?? ????????android:fromXScale="0.0"?? ????????android:fromYScale="0.0"?? ????????android:interpolator="@android:anim/accelerate_decelerate_interpolator"?? ????????android:pivotX="50%"?? ????????android:pivotY="50%"?? ????????android:toXScale="1.1"?? ????????android:toYScale="1.1"?/>?? </set>??
<!--?尺寸伸縮動畫效果?scale?? ???????屬性：interpolator?指定一個動畫的插入器?? ???????常見動畫插入器:?? ????????????accelerate_decelerate_interpolator??加速-減速?動畫插入器?? ????????????accelerate_interpolator????????加速-動畫插入器?? ????????????decelerate_interpolator????????減速-?動畫插入器?? ????????????anticipate_interpolator?先回退一小步然后加速前進?? ????????????anticipate_overshoot_interpolator???在上一個基礎上超出終點一小步再回到終點?? ????????????bounce_interpolator?最后階段彈球效果?? ????????????cycle_interpolator??周期運動?? ????????????linear_interpolator?勻速?? ????????????overshoot_interpolator??快速到達終點并超出一小步最后回到終點?? ??????浮點型值：?? ???????????? ????????????fromXScale?屬性為動畫起始時?X坐標上的伸縮尺寸?????? ????????????toXScale???屬性為動畫結束時?X坐標上的伸縮尺寸??????? ??????????? ????????????fromYScale?屬性為動畫起始時Y坐標上的伸縮尺寸?????? ????????????toYScale???屬性為動畫結束時Y坐標上的伸縮尺寸?????? ??????????? ????????????說明:?? ?????????????????以上四種屬性值?????? ??????? ????????????????????0.0表示收縮到沒有??? ????????????????????1.0表示正常無伸縮??????? ????????????????????值小于1.0表示收縮???? ????????????????????值大于1.0表示放大?? ??????????? ????????????pivotX?????屬性為動畫相對于物件的X坐標的開始位置?? ????????????pivotY?????屬性為動畫相對于物件的Y坐標的開始位置?? ??????????? ????????????說明:?? ????????????????????以上兩個屬性值?從0%-100%中取值?? ????????????????????50%為物件的X或Y方向坐標上的中點位置?? ??????????? ????????長整型值：?? ????????????duration??屬性為動畫持續時間?? ????????????說明:???時間以毫秒為單位?? ??? ????????布爾型值:?? ????????????fillAfter?屬性?當設置為true?，該動畫轉化在動畫結束后被應用?? -->??
<?xml?version="1.0"?encoding="utf-8"?>?? <set?xmlns:android="http://schemas.android.com/apk/res/android"?? ????android:repeatMode="reverse"?>?? ?? ????<translate?? ????????android:duration="1000"?? ????????android:fromXDelta="0"?? ????????android:fromYDelta="-15"?? ????????android:repeatCount="infinite"?? ????????android:toXDelta="0"?? ????????android:toYDelta="20"?/>?? ?? ????<alpha?? ????????android:duration="1000"?? ????????android:fromAlpha="1.0"?? ????????android:repeatCount="infinite"?? ????????android:toAlpha="0.3"?/>?? ?? </set>??
混合動畫是set集合，包含了平移動畫（translate）和漸變動畫（alpha），對這兩動畫簡單說明：<alpha?? ??????android:duration="1000"?? ??????android:fromAlpha="1.0"?? ??????android:repeatCount="infinite"?? ??????android:toAlpha="0.3"?/>?? ??<!--?? ???????透明度控制動畫效果?alpha?? ??????浮點型值：?? ??????????fromAlpha?屬性為動畫起始時透明度?? ??????????toAlpha???屬性為動畫結束時透明度?? ??????????說明:??? ??????????????0.0表示完全透明?? ??????????????1.0表示完全不透明?? ??????????以上值取0.0-1.0之間的float數據類型的數字?? ????????? ??????長整型值：?? ??????????duration??屬性為動畫持續時間?? ??????????說明:??????? ??????????????時間以毫秒為單位?? ??????整型值:?????????? ??????????repeatCount：重復次數?? ??????????說明：?? ??????????infinite：循環執行，?? ??????????具體正整數表示循環次數?? ???????????? ???????????repeatMode：重復模式，?? ???????????說明：?? ??????????????restart：重新從頭開始執行?? ??????????????reverse：反方向執行?? ????????????? ??-->??
[plain] view plain copy print ?<translate?? ?????android:duration="1000"?? ?????android:fromXDelta="0"?? ?????android:fromYDelta="-15"?? ?????android:repeatCount="infinite"?? ?????android:toXDelta="0"?? ?????android:toYDelta="20"?/>?? ?<!--?translate?平移動畫效果?? ?????整型值:?? ?????????fromXDelta?屬性為動畫起始時?X坐標上的位置?????? ?????????toXDelta???屬性為動畫結束時?X坐標上的位置?? ?????????fromYDelta?屬性為動畫起始時?Y坐標上的位置?? ?????????toYDelta???屬性為動畫結束時?Y坐標上的位置?? ?????????注意:?? ??????????????????沒有指定fromXType?toXType?fromYType?toYType?時候，?? ??????????????????默認是以自己為相對參照物??，默認參考物最重要??????????? ?????長整型值：?? ?????????duration??屬性為動畫持續時間?? ?????????說明:???時間以毫秒為單位?? gt;??
<?xml?version="1.0"?encoding="utf-8"?>?? <set?xmlns:android="http://schemas.android.com/apk/res/android"?>?? ?? ????<scale?? ????????android:duration="800"?? ????????android:fillAfter="false"?? ????????android:fromXScale="0.0"?? ????????android:fromYScale="0.0"?? ????????android:interpolator="@android:anim/accelerate_decelerate_interpolator"?? ????????android:pivotX="50%"?? ????????android:pivotY="50%"?? ????????android:toXScale="1.2"?? ????????android:toYScale="1.2"?/>?? ?? ????<rotate?? ????????android:duration="3000"?? ????????android:fromDegrees="0"?? ????????android:pivotX="50%"?? ????????android:pivotY="50%"?? ????????android:repeatCount="-1"?? ????????android:toDegrees="359.0"?/>?? ?? </set>??
前面介紹了漸變尺寸動畫，下面只介紹旋轉動畫：??<rotate?? ????????android:duration="3000"?? ????????android:fromDegrees="0"?? ????????android:pivotX="50%"?? ????????android:pivotY="50%"?? ????????android:repeatCount="-1"?? ????????android:toDegrees="359.0"?/>?? ????<!--?rotate?旋轉動畫效果?? ???????屬性：interpolator?指定一個動畫的插入器?? ????????????? ???????浮點數型值:?? ????????????fromDegrees?屬性為動畫起始時物件的角度?????? ????????????toDegrees???屬性為動畫結束時物件旋轉的角度?可以大于360度????? ??? ??????????? ????????????說明:?? ?????????????????????當角度為負數——表示逆時針旋轉?? ?????????????????????當角度為正數——表示順時針旋轉???????????????? ?????????????????????(負數from——to正數:順時針旋轉)????? ?????????????????????(負數from——to負數:逆時針旋轉)??? ?????????????????????(正數from——to正數:順時針旋轉)??? ?????????????????????(正數from——to負數:逆時針旋轉)????????? ??? ????????????pivotX?????屬性為動畫相對于物件的X坐標的開始位置?? ????????????pivotY?????屬性為動畫相對于物件的Y坐標的開始位置?? ??????????????????? ????????????說明:????????以上兩個屬性值?從0%-100%中取值?? ?????????????????????????50%為物件的X或Y方向坐標上的中點位置?? ??? ????????長整型值：?? ????????????duration??屬性為動畫持續時間?? ????????????說明:???????時間以毫秒為單位?? -->??
<?xml?version="1.0"?encoding="utf-8"?>?? <animation-list?xmlns:android="http://schemas.android.com/apk/res/android"?? ????android:oneshot="false"?>?? <!--????? ????根標簽為animation-list，其中oneshot代表著是否只展示一遍，設置為false會不停的循環播放動畫???? ????根標簽下，通過item標簽對動畫中的每一個圖片進行聲明???? ????android:duration?表示展示所用的該圖片的時間長度???? ?-->???? ????<item?? ????????android:drawable="@drawable/tutorial1_icon1"?? ????????android:duration="200"/>?? ????<item?? ????????android:drawable="@drawable/tutorial1_icon2"?? ????????android:duration="200"/>?? ?? </animation-list>??
[java] view plain copy print ?t1_icon1.setImageResource(R.drawable.t1_frame_animation);?? ????????????t1_icon1_animationDrawable?=?(AnimationDrawable)?t1_icon1?? ????????????????????.getDrawable();?? ????????????t1_icon1_animationDrawable.start();??
view3.getViewTreeObserver().addOnGlobalLayoutListener(?? ????????????new?OnGlobalLayoutListener()?{?? ?? ????????????????@Override?? ????????????????public?void?onGlobalLayout()?{?? ????????????????????//?TODO?Auto-generated?method?stub?? ????????????????????int?h1?=?centerLayout.getTop();?? ????????????????????int?h2?=?centerLayout.getBottom();?? ????????????????????DensityUtil?densityUtil?=?new?DensityUtil(?? ????????????????????????????MainActivity.this);?? ????????????????????int?w?=?densityUtil.getScreenWidth();?? ?? ????????????????????fx1?=?t3_icon2.getTop()?+?t3_icon2.getHeight();?? ????????????????????fy1?=?-t3_icon2.getTop()?-?t3_icon2.getHeight();?? ????????????????????tx1?=?-t3_icon2.getWidth()?-?t3_icon2.getLeft();?? ????????????????????ty1?=?t3_icon2.getTop()?+?t3_icon2.getLeft()?? ????????????????????????????+?t3_icon2.getWidth();?? ?? ????????????????????fx2?=?t3_icon3.getTop()?+?t3_icon3.getHeight();?? ????????????????????fy2?=?-t3_icon3.getTop()?-?t3_icon3.getHeight();?? ????????????????????tx2?=?-t3_icon3.getWidth()?-?t3_icon3.getLeft();?? ????????????????????ty2?=?t3_icon3.getTop()?+?t3_icon3.getLeft()?? ????????????????????????????+?t3_icon3.getWidth();?? ?? ????????????????????fx3?=?w?-?t3_icon4.getLeft();?? ????????????????????fy3?=?-(w?-?t3_icon4.getLeft());?? ????????????????????tx3?=?-(h2?-?h1?-?t3_icon4.getTop());?? ????????????????????ty3?=?h2?-?h1?-?t3_icon4.getTop();?? ?? ????????????????????fx4?=?w?-?t3_icon5.getLeft();?? ????????????????????fy4?=?-(w?-?t3_icon5.getLeft());?? ????????????????????tx4?=?-(h2?-?h1?-?t3_icon5.getTop());?? ????????????????????ty4?=?h2?-?h1?-?t3_icon5.getTop();?? ????????????????}?? ????????????});??
int?pivot?=?Animation.RELATIVE_TO_SELF;?? ????????????CycleInterpolator?interpolator?=?new?CycleInterpolator(3.0f);?? ????????????RotateAnimation?animation?=?new?RotateAnimation(0,?10,?pivot,?? ????????????????????0.47f,?pivot,?0.05f);?? ????????????animation.setStartOffset(500);?? ????????????animation.setDuration(3000);?? ????????????animation.setRepeatCount(1);//?Animation.INFINITE?? ????????????animation.setInterpolator(interpolator);?? ????????????t4_icon1.startAnimation(animation);??
? ? 墨跡天氣引導界面共有4個視圖，先看一下：（這里引入的圖片都是實現后的，截圖都是靜態圖，運行程序看動畫效果）。
? ? ? ? ? ? ? ??
圖一 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖二
? ??
? ? ? ? ? ? ? ??
圖三 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖四
圖一動畫效果： ? ?
? ? 圖一中有四個動畫效果,最上面的“極低耗電”標示，最下面的箭頭標示，還有中間旋轉的電池圖標和電子表的閃動，最上面的使用的漸變尺寸（scale）動畫效果:
[html] view plain copy print ?
下面簡單說明了scale的各個屬性：
[plain] view plain copy print ?
最下面的箭頭標示使用了混合動畫：
[html] view plain copy print ?
混合動畫是set集合，包含了平移動畫（translate）和漸變動畫（alpha），對這兩動畫簡單說明：
[plain] view plain copy print ?
[plain] view plain copy print ?
中間的電池動畫使用了旋轉（rotate）動畫和漸變尺寸動畫的組合：
[html] view plain copy print ?
前面介紹了漸變尺寸動畫，下面只介紹旋轉動畫：
[plain] view plain copy print ?
電子表閃動動畫使用animation-list實現的逐幀動畫：
[html] view plain copy print ?
[java] view plain copy print ?
圖二動畫效果：?
? ? 圖二中最上面的“極小安裝”動畫和最下面的箭頭動畫和圖一中一樣，不做過多介紹，中間動畫使用的尺寸漸變動畫，和圖一中的尺寸漸變動畫一樣，也不多介紹。
圖三動畫效果：?
? ? 圖二中最上面的“極速流暢”動畫和最下面的箭頭動畫和圖一中一樣，不做過多介紹。中間效果使用了云移動效果使用了平移動畫，火箭噴氣效果使用了animation-list的逐幀動畫。逐幀動畫就不多說了，這里的平移動畫沒有使用xml文件實現，使用的java代碼，為了適配多種屏幕，需要計算平移的初始位置，代碼定義了幾個位置：[java] view plain copy print ?
圖四動畫效果：
? ? 圖四中“墨跡天氣3.0”圖片使用了RotateAnimation，動畫插值器使用的CycleInterpolator，“全面革新 我是極致控”使用的漸變尺寸動畫。
[java] view plain copy print ?
上面基本實現了墨跡天氣的動畫效果。
資源庫下載：http://download.csdn.net/detail/xyz_lmn/7094071
demo下載看回復
案例apk下載
總結
以上是生活随笔為你收集整理的墨迹天气3.0引导动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 美团外卖饿了么竞品分析：共生存？还是你死
- 下一篇： 学习如逆水行舟，只有坚持不断的学习,才能