[Day18] swift & kotlin 实作篇！(9) Animation -kotlin

kotlin

kotlin 也一样来让小鸡跳起来吧
这边也一样有很多种动画的写法
同swift来玩玩关键影格动画吧
首先来看看语法

ObjectAnimator.ofPropertyValuesHolder(
    动画对象, 
    处理动画的物件+关键影格: PropertyValuesHolder  ... Varargs 可变数量的参数
).apply {
    // 此闭包内可设定各种动画参数
    start() // 开始执行动画
}

语法上看起来不难对吧～
简单来说动画就是 时间点 到 时间点
之间产生属性(长宽高, 位置, 颜色) 的改变

让我们再看一次目标动画的属性吧

属性名称 说明
translationX 透过改变x座标值, 让小鸡呈现左右移动的效果
translationY 透过改变Ｙ座标值, 来实现上下跳动的感觉
rotated 透过变更角度, 让小鸡有种往上跳起, 与往下降落的感觉
scaledX 当小鸡跳到最左与最右时, 翻转小鸡, 小鸡维持往前的效果, 如果没有翻转会看到小鸡倒车跑

同上一章～我们把时间表再拿来看一下

时间(用百分比表示) 说明
0% => 10% 小鸡往左边跳起
10% => 20% 小鸡往左边降下
20% => 30% 小鸡往左边跳起
30% => 40% 小鸡转身往右边降下跳回
40% => 50% 小鸡往右边跳起
50% => 60% 小鸡往右边降下跳回原点
60% => 70% 小鸡往右边跳起
70% => 80% 小鸡往右边降下
80% => 90% 小鸡转身往左边跳起
90% => 100% 小鸡往左边落下回原点

目前用这样的思维来让小鸡左右跳动吧
接着我们看看关键影格的语法

PropertyValuesHolder.ofKeyframe(属性名称,
    Keyframe.ofFloat(0f, 数值), // 0f= 动画0%时, 
    Keyframe.ofFloat(.1f, 数值),// 0.1f= 动画10%时,
    ...
)

因为语法的关系
与swift不同
不需要制作资料模型～我们直接开始来撰写影格吧

// translationX
val pvhtranslationX = PropertyValuesHolder.ofKeyframe("translationX",
    Keyframe.ofFloat(0f, 0f),
    Keyframe.ofFloat(.1f, -33f),
    Keyframe.ofFloat(.2f, -66f),
    Keyframe.ofFloat(.3f, -99f),
    Keyframe.ofFloat(.4f, -66f),
    Keyframe.ofFloat(.5f, -33f),
    Keyframe.ofFloat(.6f, 0f),
    Keyframe.ofFloat(.7f, 40f),
    Keyframe.ofFloat(.8f, 100f),
    Keyframe.ofFloat(.9f, 40f),
    Keyframe.ofFloat(1f, 0f)
)

// translationY
val pvhtranslationY = PropertyValuesHolder.ofKeyframe("translationY",
    Keyframe.ofFloat(0f, 0f),
    Keyframe.ofFloat(.1f, -20f),
    Keyframe.ofFloat(.2f, 0f),
    Keyframe.ofFloat(.3f, -20f),
    Keyframe.ofFloat(.4f, 0f),
    Keyframe.ofFloat(.5f, -20f),
    Keyframe.ofFloat(.6f, 0f),
    Keyframe.ofFloat(.7f, -20f),
    Keyframe.ofFloat(.8f, 0f),
    Keyframe.ofFloat(.9f, -20f),
    Keyframe.ofFloat(1f, 0f)
)
// rotation
val pvhRotation = PropertyValuesHolder.ofKeyframe("rotation",
    Keyframe.ofFloat(0f, 10f),
    Keyframe.ofFloat(.1f, -10f),
    Keyframe.ofFloat(.2f, 10f),
    Keyframe.ofFloat(.3f, -10f),
    Keyframe.ofFloat(.4f, 10f),
    Keyframe.ofFloat(.5f, -10f),
    Keyframe.ofFloat(.6f, 10f),
    Keyframe.ofFloat(.7f, -10f),
    Keyframe.ofFloat(.8f, 10f),
    Keyframe.ofFloat(.9f, -10f),
    Keyframe.ofFloat(1f, 10f)
)
// scaleX
val pvhScaledBy = PropertyValuesHolder.ofKeyframe("scaleX",
    Keyframe.ofFloat(0f, 1f),
    Keyframe.ofFloat(.1f, 1f),
    Keyframe.ofFloat(.2f, 1f),
    Keyframe.ofFloat(.3f, 1f),
    Keyframe.ofFloat(.4f, -1f),
    Keyframe.ofFloat(.5f, -1f),
    Keyframe.ofFloat(.6f, -1f),
    Keyframe.ofFloat(.7f, -1f),
    Keyframe.ofFloat(.8f, -1f),
    Keyframe.ofFloat(.9f, 1f),
    Keyframe.ofFloat(1f, 1f)
)

所有关键影格都设定好了
接下来让我们把关键影格设定到动画物件身上吧
首先我们给小鸡图片一个id 叫做ggView
Kotlin 小鸡图片
接下来就安装影格吧

// 取得 ggView
val ggView: ImageView = findViewById(R.id.ggView)
// 设定 ggView 关键影格
ObjectAnimator.ofPropertyValuesHolder(ggView,
    pvhtranslationY,
    pvhtranslationX,
    pvhRotation,
    pvhScaledBy).apply {
    duration = 4000 // 动画持续四秒
    repeatCount = ObjectAnimator.INFINITE  // 无限重播
    start()  // 开始播放
}

是的～动画就这样做好搂～
让我们看一下完整程序码吧

package com.test.chickbb

import android.animation.Keyframe
import android.animation.ObjectAnimator
import android.animation.PropertyValuesHolder
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import java.util.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // 透过 R.id.ggButton 取得 Button
        val ggButton: Button = findViewById(R.id.ggButton)
        // 绑定 ggButton onClick 要执行的方法
        ggButton.setOnClickListener{ ggAction() }
        setChickAnimation()
    }

    fun ggAction() {
        // 透过 R.id.ggTextView 取得 TextView
        val ggTextView: TextView = findViewById(R.id.ggTextView)
        // ggTextView 更新  text
        ggTextView.text = ggTextView.text.toString().plus("BB~")
    }

    fun setChickAnimation() {
        // translationX
        val pvhtranslationX = PropertyValuesHolder.ofKeyframe("translationX",
            Keyframe.ofFloat(0f, 0f),
            Keyframe.ofFloat(.1f, -33f),
            Keyframe.ofFloat(.2f, -66f),
            Keyframe.ofFloat(.3f, -99f),
            Keyframe.ofFloat(.4f, -66f),
            Keyframe.ofFloat(.5f, -33f),
            Keyframe.ofFloat(.6f, 0f),
            Keyframe.ofFloat(.7f, 40f),
            Keyframe.ofFloat(.8f, 100f),
            Keyframe.ofFloat(.9f, 40f),
            Keyframe.ofFloat(1f, 0f)
        )

        // translationY
        val pvhtranslationY = PropertyValuesHolder.ofKeyframe("translationY",
            Keyframe.ofFloat(0f, 0f),
            Keyframe.ofFloat(.1f, -20f),
            Keyframe.ofFloat(.2f, 0f),
            Keyframe.ofFloat(.3f, -20f),
            Keyframe.ofFloat(.4f, 0f),
            Keyframe.ofFloat(.5f, -20f),
            Keyframe.ofFloat(.6f, 0f),
            Keyframe.ofFloat(.7f, -20f),
            Keyframe.ofFloat(.8f, 0f),
            Keyframe.ofFloat(.9f, -20f),
            Keyframe.ofFloat(1f, 0f)
        )
        // rotation
        val pvhRotation = PropertyValuesHolder.ofKeyframe("rotation",
            Keyframe.ofFloat(0f, 10f),
            Keyframe.ofFloat(.1f, -10f),
            Keyframe.ofFloat(.2f, 10f),
            Keyframe.ofFloat(.3f, -10f),
            Keyframe.ofFloat(.4f, 10f),
            Keyframe.ofFloat(.5f, -10f),
            Keyframe.ofFloat(.6f, 10f),
            Keyframe.ofFloat(.7f, -10f),
            Keyframe.ofFloat(.8f, 10f),
            Keyframe.ofFloat(.9f, -10f),
            Keyframe.ofFloat(1f, 10f)
        )
        // scaleX
        val pvhScaledBy = PropertyValuesHolder.ofKeyframe("scaleX",
            Keyframe.ofFloat(0f, 1f),
            Keyframe.ofFloat(.1f, 1f),
            Keyframe.ofFloat(.2f, 1f),
            Keyframe.ofFloat(.3f, 1f),
            Keyframe.ofFloat(.4f, -1f),
            Keyframe.ofFloat(.5f, -1f),
            Keyframe.ofFloat(.6f, -1f),
            Keyframe.ofFloat(.7f, -1f),
            Keyframe.ofFloat(.8f, -1f),
            Keyframe.ofFloat(.9f, 1f),
            Keyframe.ofFloat(1f, 1f)
        )
        // 取得 ggView
        val ggView: ImageView = findViewById(R.id.ggView)
        // 设定 ggView 关键影格
        ObjectAnimator.ofPropertyValuesHolder(ggView,
            pvhtranslationY,
            pvhtranslationX,
            pvhRotation,
            pvhScaledBy).apply {
            duration = 4000 // 动画持续四秒
            repeatCount = ObjectAnimator.INFINITE  // 无限重播
            start()  // 开始播放
        }
    }
}

此时只要APP运行
在 onCreate 时会安装动画, 之後就不断播放这则动画了
kotlin 小鸡ＢＢ

小碎嘴时间 ヽ(ﾟ´Д`)ﾉﾟ

只要想到关键影格
就会想到Flash动画 ( ≧Д≦)

现在的小朋友应该都不知道了吧？

皮卡丘打排球~
打兔子～
钓鱼～
2D CS ~~~~~

童年回忆啊～ 超好玩的

还有阿贵～干谯龙~
阿骂的脚皮～～

＼•̀益•́´／ ＼•̀益•́´／＼`•̀益•́´／

不说了～我要来去看干谯龙的音乐教室了


<<:  Day 12 均衡思考赚钱与不被花钱

>>:  Day11 - [丰收款] 礼尚往来，我们也需要解开API回传的密秘

[Day9]参观乙太链与区块链

那我们就实际上网去看一下乙太链跟区块链长怎麽样吧! 参观乙太链 这边分别是最近新增的区块以及最近完...

[Day 28] Android Studio 七日陨石开发：把 tflite 模型放进 app

0. 前言 距离真正完成表情辨识的App， 只差把辨识图像的功能实作出来， 在这里我们必须将Day2...

Day-03　JavaScript资料型别（2）

资料型别：字串 JavaScript的字串（string）以单引号（‘ ’）或双引号（“ ”）包住，...

[Day 26] BDD - 组合技

组合技 Drone + godog + Mattermost 当有需求要在k8s上透过drone定期...

[PoEAA] Data Source Architectural Pattern - Table Data Gateway

本篇同步发布於个人Blog: [PoEAA] Data Source Architectural P...