2. 程式人生 > 其它 >Android 動畫基礎：View 動畫

Android 動畫基礎：View 動畫

阿新 • • 發佈：2021-01-17

技術標籤：AndRoid開發android

前言

View 動畫的作用物件是View,支援4種動畫效果，分別是平移動畫、縮放動畫、旋轉動畫和透明度動畫，對應著Animation 的四個子類：TranslateAnimation、ScaleAnimation、RotateAnimation 和AlphaAnimation。

平移動畫

private fun translateAnimEx(btn: Button){
        btn.text="平移動畫"
        // xml
        val transAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_translate_ex)
        transAnimation.duration = 3000
        btn.startAnimation(transAnimation)
        // 程式碼
        val transAnimation=TranslateAnimation(0f,180f,0f,180f)
        transAnimation.duration = 3000
        btn.startAnimation(transAnimation)
    }
 
anim_translate_ex.xml檔案
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:fromYDelta="0"
    android:toXDelta="180"
    android:toYDelta="180" />

效果：

縮放動畫

private fun scaleAnimEx(btn: Button){
        btn.text="縮放動畫"

        // xml
        val scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_scale_ex)
        scaleAnimation.duration = 3000
        btn.startAnimation(scaleAnimation)

        // 程式碼
        val scaleAnimation=ScaleAnimation(0f,120f,0f,120f,
               50f, 50f)
        scaleAnimation.duration = 3000
        btn.startAnimation(scaleAnimation)
    }
 
anim_scale_ex.xml

<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0"
    android:toXScale="20"
    android:fromYScale="0"
    android:toYScale="20"
    android:pivotX="50"
    android:pivotY="50"/>

效果：

旋轉動畫

 private fun rotateAnimEx(btn: Button){
        btn.text="旋轉動畫"

        // xml
        val rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_rotate_ex)
        rotateAnimation.duration = 3000
        btn.startAnimation(rotateAnimation)

        // 程式碼
        val rotateAnimation=RotateAnimation(0f,360f,100f,100f)
        rotateAnimation.duration = 3000
        btn.startAnimation(rotateAnimation)
    }
anim_rotate_ex.xml
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="100"
    android:pivotY="100"
    android:toDegrees="360" />

效果

透明度動畫

private fun alphaAnimEx(btn: Button){
        btn.text="透明動畫"
        // xml
        val alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha_ex)
        alphaAnimation.duration=3000
        btn.startAnimation(alphaAnimation)

        // 程式碼
        val alphaAnimation = AlphaAnimation(0f, 1f)
        alphaAnimation.duration = 3000

        btn.startAnimation(alphaAnimation)
    }
anim_alpha_ex.xml
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0"
    android:toAlpha="1" />

效果

動畫集合

private fun setAnimEx(btn: Button){
        // xml
        val setAnimation = AnimationUtils.loadAnimation(this, R.anim.animation_set)
        setAnimation.duration = 3000
        btn.startAnimation(setAnimation)

        // 程式碼
        val rotateAnimation=RotateAnimation(0f,360f)
        val transAnimation=TranslateAnimation(0f,180f,0f,180f)

        val setAnimation=AnimationSet(false)
        setAnimation.addAnimation(rotateAnimation)
        setAnimation.addAnimation(transAnimation)

        setAnimation.duration = 350
        setAnimation.fillAfter=true
        setAnimation.interpolator=LinearInterpolator()
        setAnimation.zAdjustment=AnimationSet.ZORDER_NORMAL
        btn.startAnimation(setAnimation)
    }
animation_set.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="350"
    android:zAdjustment="normal">

    <translate

        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100" />

    <rotate
        android:duration="100"
        android:fromDegrees="0"
        android:toDegrees="360" />
</set>

動畫 xml 相關屬性

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    //動畫持續的時間
    android:duration="{int}"
    //動畫結束以後View是否停留在結束位置，true表示View停留在結束位置，false則不停留
    android:fillAfter="{true|false}"
    //動畫結束以後View是否停留在開始位置，true表示View停留在結束位置，false則不停留
    android:fillBefore="{true|false}"
    // 表示集合中的動畫是否和集合共享同一個插值器
    android:shareInterpolator="{true|false}"
    // 重複模式
    android:repeatMode="{restart|reverse}"
    // 延時開始動畫
    android:startOffset="{int}"
    // 設定插值器，
    android:interpolator="@{package:}anim/interpolator_resource">

    <rotate
        //旋轉開始的角度
        android:fromDegrees="float"
        //旋轉的**軸點**的x座標
        android:pivotX="float"
        // 旋轉的**軸點**的y座標
        android:pivotY="float"
        // 旋轉結束的角度
        android:toDegrees="float" />

    <alpha
        //表示透明度的起始值
        android:fromAlpha="float"
        //表示透明度的結束值
        android:toAlpha="float" />
    <scale
        //水平方向縮放的起始值
        android:fromXScale="float"
        //豎直方向縮放的起始值
        android:fromYScale="float"
        //旋轉的**軸點**的x座標
        android:pivotX="float"
        // 旋轉的**軸點**的y座標
        android:pivotY="float"
        //水平方向縮放的結束值
        android:toXScale="float"
        //豎直方向縮放的結束值
        android:toYScale="float" />
    <translate
        //表示x的起始值
        android:fromXDelta="float"
        //表示y的起始值
        android:fromYDelta="float"
        //水平方向縮放的結束值
        android:toXDelta="float"
        // 表示y的結束值
        android:toYDelta="float" />

</set>

自定義動畫

只需要繼承Animation這個抽象類,然後重寫它的initialize 和applyTransformation方法，在initialize方法中做些初始化工作，在applyTransformation 中進行相應的矩陣變換即可，很多時候需要採用Camera來簡化矩陣變換的過程。

示例：3D 旋轉

// 自定義View 動畫
    private fun animatonView() {
        val rotate3DAnimation = Rotate3DAnimation(0f, 360f, 30f, 180f, true, 6f)
        rotate3DAnimation.interpolator = AccelerateDecelerateInterpolator()
        rotate3DAnimation.fillAfter = true
        rotate3DAnimation.duration = 3500
        btn_anim_set.startAnimation(rotate3DAnimation)
    }


class Rotate3DAnimation : Animation {


    private var mFromDegree: Float
    private var mToDegree: Float
    private var mCenterX: Float
    private var mCenterY: Float
    private var mDepthZ: Float
    private var mReverse: Boolean
    private lateinit var mCamera: Camera

    constructor(mFromDegree: Float, mToDegree: Float, mCenterX: Float,mCenterY: Float,   mReverse: Boolean, mDepthZ: Float) : super() {
        this.mFromDegree = mFromDegree
        this.mCenterY = mCenterY
        this.mCenterX = mCenterX
        this.mToDegree = mToDegree
        this.mReverse = mReverse
        this.mDepthZ = mDepthZ
    }


    // 初始化
    override fun initialize(width: Int, height: Int, parentWidth: Int, parentHeight: Int) {
        super.initialize(width, height, parentWidth, parentHeight)
        this.mCamera = Camera()
    }

    // 矩陣變化
    override fun applyTransformation(interpolatedTime: Float, t: Transformation?) {
        super.applyTransformation(interpolatedTime, t)
        var fromDegree=mFromDegree
        var degree=fromDegree+(mToDegree-mFromDegree)*interpolatedTime

        var centerX=mCenterX
        var centerY=mCenterY

        val  camera=mCamera
        val matrix=t?.matrix
        //將當前的攝像頭位置儲存下來，以便變換進行完成後恢復成原位
        camera.save()
        // camera.translate，這個方法接受3個引數，分別是x,y,z三個軸的偏移量，我們這裡只將z軸進行了偏移
        if (mReverse){
            // z的偏移會越來越大。這就會形成這樣一個效果，view從近到遠
            camera.translate(0f,0f,mDepthZ*interpolatedTime)
        }else{
            // z的偏移會越來越小。這就會形成這樣一個效果，我們的View從一個很遠的地方向我們移過來，越來越近，
                // 最終移到了我們的視窗上面
            camera.translate(0f,0f,mDepthZ*(1f-interpolatedTime))
        }
//        View加上旋轉效果，在移動的過程中，檢視還會移Y軸為中心進行旋轉
        camera.rotateY(degree)
//        將我們剛才定義的一系列變換應用到變換矩陣上面，呼叫完這句之後，我們就可以將camera的位置恢復了，以便下一次再使用
        camera.getMatrix(matrix)
        // camera位置恢復
        camera.restore()
// 以View的中心點為旋轉中心,如果不加這兩句，就是以（0,0）點為旋轉中心
        matrix?.preTranslate(-centerX,-centerY)
        matrix?.postTranslate(centerX,centerY)
    }
}

效果：

VIew 動畫原理

每次繪製檢視時View所在的ViewGroup中的drawChild函式獲取該View的Animation的Transformation值，然後呼叫canvas.contact(transformToApply.getMatrix()),通過矩陣運算完成動畫幀。如果動畫沒有完成，就繼續呼叫invalidate()函式，啟動下次繪製來驅動動畫，從而完成整個動畫的繪製。

相關推薦

Android 動畫基礎：View 動畫

技術標籤：AndRoid開發android 前言 View 動畫的作用物件是View,支援4種動畫效果，分別是平移動畫、縮放動畫、旋轉動畫和透明度動畫，對應著Animation 的四個子類：TranslateAnimation、ScaleAnimation、RotateA

JavaScript動畫基礎：canvas繪製簡單動畫

動畫是將靜止的畫面變為動態的藝術．實現由靜止到動態，主要是靠人眼的視覺殘留效應。視覺殘留也叫視覺暫留現象，物體在快速運動時, 當人眼所看到的影像消失後，人眼仍能繼續保留其影像0.1~0.4秒左右的影象，這種現象

android實現截圖並動畫消失效果的思路詳解

整體思路 1、獲取要截圖的view 2、根據這個view建立Bitmap 3、儲存圖片，拿到圖片路徑

JavaScript動畫例項：遞迴分形圖動態展示

在“JavaScript圖形例項：SierPinski三角形” 和“JavaScript圖形例項：Levy曲線及其變形”等文章中我們介紹了通過遞迴生成分形圖形的方法。我們可以將繪製的分形圖形每隔一定的時間間隔後，增加

JavaScript動畫例項：動感小球

已知圓的座標方程為： X=R*SIN(θ) Y=R*COS(θ) （0≤θ≤2π） 將0~2π區間等分48段，即設定間隔dig的值為π/24。θ初始值從0開始，按曲線方程求得座標值(x,y)，並在當前座標處繪製一

JavaScript動畫例項：螺旋線

數學中有各式各樣富含詩意的曲線，螺旋線就是其中比較特別的一類。螺旋線這個名詞來源於希臘文，它的原意是“旋卷”或“纏卷”。例如，平面螺旋便是以一個固定點開始向外逐圈旋繞而形成的曲線。

JavaScript動畫例項：曲線的繪製

在“JavaScript圖形例項：曲線方程”一文中，我們給出了15個曲線方程繪製圖形的例項。這些曲線都是根據其曲線方程，在[0,2π]區間取一系列角度值，根據給定角度值計算對應的各點座標，然後在計算出的座標

JavaScript動畫例項：旋轉的正三角形

給定一個正三角形的重心座標為（x0,y0），高為h，可以用如下的語句繪製一個底邊水平的正三角形。

JavaScript動畫例項：粒子文字

1．粒子文字的實現原理 粒子文字的實現原理是：使用兩張 canvas，一張是使用者看不到的canvas1，用來繪製文字；另一張是使用者看到的canvas2，用來根據canvas1中繪製的文字資料來生成粒子。

JavaScript動畫例項：沿五角星形線擺動的小圓

五角星形線的笛卡爾座標方程式可設為： r=10+(3*sin(θ*2.5))^2  x=r*cos(θ)

cocos2dx(4.0)學習筆記-2： 紋理快取，精靈幀快取，動畫快取以及幀動畫

1.紋理快取的使用(TextureCache) 　　紋理快取時cocos2dx中較為底層且常用的快取，通過提前將紋理圖片等等資源載入進記憶體方便之後呼叫。比如有些遊戲在不同場景的切換過程中可能會有一個讀條的場景，這個場景中通常

JavaScript動畫例項：炸開的小球

1．炸開的小球 定義一個小球物件類Ball，它有6個屬性：圓心座標（x,y）、小球半徑radius、填充顏色color、圓心座標水平方向的變化量speedX、圓心座標垂直方向的變化量speedY。

CSS動畫例項：圖文切換

先準備好一張圖片，在頁面中放置一個類名為container的層作為圖文容器，在該層中再定義兩個層：一個類名為image-box的層放置圖片，一個類名為text-desc的層放置文字描述，HTML程式碼描述如下：

CSS動畫基礎知識

CSS動畫就是通過CSS （Cascading Style Sheet，層疊樣式表）程式碼搭建的網頁動畫。它允許設計師和開發人員通過編輯網站的CSS程式碼來新增頁面動畫，從而輕鬆取代傳統動畫圖片或flash動畫的設計方式。

CSS動畫例項：旋轉的葉片

在頁面中放置一個類名為container的層作為容器，在該層中再定義一個名為shape的子層，HTML程式碼描述如下：

CSS動畫例項：一顆躁動的心

在頁面中放置一個類名為container的層作為盛放心心的容器，在該層中再定義一個名為heart的子層，HTML程式碼描述如下：

CSS動畫例項：Loading載入動畫效果（二）

2．條狀型Loading 這類Loading動畫的基本思想是：在呈現容器中定義一個或多個子層，再對每個子層進行樣式定義，使得其顯示為一個條形或方形，最後編寫關鍵幀動畫控制，使得各個條形（或方形）的大小、位置、填充色等

CSS動畫例項：行星和衛星

設頁面中有<div class=\" planet \"></div>，用來繪製一個行星和衛星圖形。這個圖形包括三部分：行星、衛星和衛星旋轉的軌道。定義. planet的樣式規則如下：

WPF動畫基礎小例項 - DoubleAnimation遇上Effect

動畫效果如下： 原始碼如下： <UniformGrid Columns=\"2\"> <!--DropShadowEffect陰影效果-->

WPF動畫基礎小例項 - Path相關PointAnimationUsingPath、DoubleAnimationUsingPath、MatrixAnimationUsingPath等

動畫效果如下： 原始碼如下： <UniformGrid> <Canvas x:Name=\"cvs1\" Width=\"340\" Height=\"215\"