Androidアニメーションは、次の3つのカテゴリに分類できます。
1>ビューアニメーションは、トゥイーンとも呼ばれます。
2>フレームアニメーション
3>プロパティのアニメーション
================== [ アニメーションを表示 ] =========================
5つのタイプがあります。
アルファ 勾配透明アニメーション効果の
スケール アニメーション効果をスケーリング勾配サイズ
翻訳 画面遷移位置移動アニメーションエフェクト
回転 画面転送回転アニメーション効果
layoutAnimation コンテナ制御アプリケーション統一アニメーション
まず、ディレクトリを作成するための具体的な手順は次のとおりです。
選択:アニメーションディレクトリ
OK、ディレクトリを見て、アニメーションファイルを作成します。
名前:my_animat
では、このセットに必要なアニメーションを追加しましょう。
アニメーションまたは複数のアニメーションの組み合わせにすることができます
では、水平モーションペインティングを1つずつ見ていきましょう。
【翻訳】
アニメーションターゲットビューの設定を確認すると、TextViewが使用されます。 注:使用される幅と高さは300pxピクセル、ピクセル、ピクセルです。
pxを使用する理由
<TextView
android:id="@+id/tv_animator"
android:layout_width="300px"
android:layout_height="300px"
android:background="@color/color_00a3f3"
android:text="animator"
android:textColor="@color/color_7e4513"
android:gravity="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
次に、アニメーションtranslate_ani.xmlの 注:fillAfter = "true" ビューは、アニメーションの最後にとどまります。
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<!-- 平移 对应 TranslateAnimation
fromXDelta,fromYDelta 起始时X,Y座标,如果是0,0,就从远处开启
toXDelta, toYDelta 动画结束时X,Y的座标 这个坐标是相对于 原始位置(0,0)的
看下 toXDelta toYDelta 和TextView 宽高同是 300
-->
<translate
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="300"
android:toYDelta="300"
android:duration="500">
</translate>
</set>
元のスクリーンショットを見てください
アクティビティのレイアウトを見てください:activity_animator.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".animator.AnimatorActivity">
<TextView
android:id="@+id/tv_animator"
android:layout_width="300px"
android:layout_height="300px"
android:background="@color/color_00a3f3"
android:text="目标动画"
android:textColor="@color/color_7e4513"
android:gravity="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="@+id/tv_animator1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/dp10"
android:layout_marginTop="@dimen/dp100"
android:text="平移动画"
android:background="@color/color_999999"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_animator"/>
<TextView
android:id="@+id/tv_animator2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/dp10"
android:layout_marginTop="@dimen/dp10"
android:text="透明动画"
android:background="@color/color_999999"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_animator1"/>
<TextView
android:id="@+id/tv_animator3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/dp10"
android:layout_marginTop="@dimen/dp10"
android:text="旋转动画"
android:background="@color/color_999999"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_animator2"/>
<TextView
android:id="@+id/tv_animator4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/dp10"
android:layout_marginTop="@dimen/dp10"
android:text="缩放动画"
android:background="@color/color_999999"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_animator3"/>
</android.support.constraint.ConstraintLayout>
活動コード:
package com.leo.dicaprio.myutilapp.animator
import android.content.Context
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.view.animation.AnimationUtils
import android.widget.Toast
import com.leo.dicaprio.myutilapp.R
import kotlinx.android.synthetic.main.activity_animator.*
import org.jetbrains.anko.startActivity
class AnimatorActivity : AppCompatActivity() {
companion object {
fun launch(context: Context) {
context.startActivity<AnimatorActivity>()
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_animator)
tv_animator.setOnClickListener { Toast.makeText(this, "被单击了", Toast.LENGTH_LONG).show() }
tv_animator1.setOnClickListener { startAni1() }
tv_animator2.setOnClickListener { startAni2() }
tv_animator3.setOnClickListener { startAni3() }
tv_animator4.setOnClickListener { startAni4() }
}
/**
* 平移动画
* */
private fun startAni1() {
//先加载 平移动画
val animation = AnimationUtils.loadAnimation(this, R.anim.translate_ani)
tv_animator.startAnimation(animation)
}
}
1回クリックすると、アニメーション効果はgifを生成せず、最終結果を直接アップロードします
最終結果を見ることができます。このとき、携帯電話は開発者モードのボーダーレイアウトを開きました。
分析:
ターゲットのビューの幅と高さは300 * 300ピクセルで、アニメーションのtoXDeltaとtoYDeltaはどちらも300です。つまり、XY軸の正の方向に300ピクセル移動します。
toXDeltaの単位がピクセルであると確信しているのはなぜですか?スクリーンショットから、ターゲットビューはソースポイント(左上隅の座標)によってXY方向に移動した距離に基づいていることがわかります。これは、ターゲットの幅と高さです。。。
ちなみに、この時、青い部分をクリックすると、Taostは再生されず、元の位置をクリックしたときのみToastが再生されます。したがって、ビューアニメーションは変更されていません
プロパティを表示します。したがって、対象のアニメーションビューにクリックイベントがある場合、ビューアニメーションでは機能を実現できません。。。これに注意してください。
わかりました、基本的に理解できます。実際、translateタグはTranslateAnimation()に対応しています
あなたはそれを使うことができ、コードは次のように変更されます:
/**
* 平移动画
* */
private fun startAni1() {
//先加载 平移动画
// val animation = AnimationUtils.loadAnimation(this, R.anim.translate_ani)
// tv_animator.startAnimation(animation)
//单位是像素
val translateAnimation = TranslateAnimation(0F, 300F,0F , 300F)
translateAnimation.fillAfter = true//停留在结束地方
translateAnimation.duration = 500//时间
tv_animator.startAnimation(translateAnimation)
}
同じ効果!!!
さらに、このTranslateAnimationを使用して、アニメーションの実行ステータスを監視することもできます。たとえば、開始、終了、繰り返しなどです。
といった:
/**
* 平移动画
* */
private fun startAni1() {
//先加载 平移动画
// val animation = AnimationUtils.loadAnimation(this, R.anim.translate_ani)
// tv_animator.startAnimation(animation)
val translateAnimation = TranslateAnimation(0F, 300F, 0F, 300F)
translateAnimation.setAnimationListener(object : Animation.AnimationListener {
override fun onAnimationRepeat(animation: Animation?) {
//动画重复
}
override fun onAnimationEnd(animation: Animation?) {
//动画结束
}
override fun onAnimationStart(animation: Animation?) {
//动画开始
}
})
translateAnimation.fillAfter = false//停留在结束地方
translateAnimation.duration = 500//时间
tv_animator.startAnimation(translateAnimation)
}
【アルファ】
透明度は比較的単純です。。。。alpha_ani.xmlコード:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<!--透明
fromAlpha:开始时透明度 0.0- 1.0 0.0全透明 1.0不透明
toAlpha: 结束时透明度 0.0- 1.0
duration:动画持续时间 单位 毫秒
fillAfter:动画结束后是否停留在结束位置,true停留
-->
<alpha android:fromAlpha="1"
android:toAlpha="0"
android:duration="10000"
>
</alpha>
</set>
アクティビティリファレンス
/**
* 透明动画
* */
private fun startAni2() {
//先加载 透明动画
val animation = AnimationUtils.loadAnimation(this, R.anim.alpha_ani)
tv_animator.startAnimation(animation)
/*
* 或者
* */
val alphaAnimation = AlphaAnimation(1.0F, 0F)
alphaAnimation.fillAfter = true
alphaAnimation.duration = 5000
tv_animator.startAnimation(alphaAnimation)
}
【回転】
回転、通常4つのパラメータ
fromDegrees 开始时的角度
toDegrees 结束时角度 ,正代表顺时针
pivotX 旋转中心轴点 X坐标 不指定 默认是View 左上角 X坐标 单位像素
pivotY 旋转中心轴点 Y坐标 不指定 默认是View 左上角 Y坐标 单位像素
ばかげたことを言わないでください。ターゲットビューに移動してください。これは、300 * 300ピクセルのTextViewでもあります。
<TextView
android:id="@+id/tv_animator"
android:layout_width="300px"
android:layout_height="300px"
android:background="@color/color_00a3f3"
android:text="目标动画"
android:textColor="@color/color_7e4513"
android:gravity="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
アニメーションファイルをアップロード:anim /rotate_ani.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<!--
fromDegrees 开始时的角度
toDegrees 结束时角度 ,正代表顺时针
pivotX 旋转中心轴点 X坐标 不指定 默认是View 左上角 X坐标
pivotY 旋转中心轴点 Y坐标 不指定 默认是View 左上角 Y坐标
-->
<rotate android:fromDegrees="0"
android:toDegrees="180"
android:pivotY="150"
android:pivotX="150"
android:duration="5000">
</rotate>
</set>
注意!!!ピボットXとピボットYは150で、TextViewの幅と高さのちょうど半分です。
アクティビティコール:
/**
* 旋转动画
* */
private fun startAni3() {
//先加载 旋转动画
val animation = AnimationUtils.loadAnimation(this, R.anim.rotate_ani)
tv_animator.startAnimation(animation)
/*
* 或者
* */
val rotateAnimation = RotateAnimation(0F, 180F, 150F, 150F)
rotateAnimation.fillAfter = true
rotateAnimation.duration = 5000
tv_animator.startAnimation(rotateAnimation)
}
テストの結果は、TextViewが300 * 300ピクセルの場合、
1>ピボットXとピボットYはどちらも150で、回転の中心はTextViewの中心です。
1>ピボットXとピボットYはどちらも0で、回転の中心はTextViewの左上隅です。
したがって、結論は次のとおりです。回転するドットの座標は、ターゲットビューの左上隅(0,0)の座標に基づいています。
【規模】
ズーム。。。。。。
fromXScale,fromYScale X Y 方向 缩放起始值
toXScale, toYScale X Y 方向 缩放结束值
pivotX ,pivotY X Y 方向 缩放中心值 中心点也是和上面的基准规则一样
コードは掲載されていません。すべて同じ原則です。。。。。
============ [複数のアニメーションが一緒にまたは順番に再生されます] =============
複数のアニメーションを同時に再生する:
my_toget__animat.xml代码: 多个动画(透明,旋转,缩放)一起
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="1"
android:toAlpha="0"
android:duration="5000">
</alpha>
<rotate android:fromDegrees="0"
android:toDegrees="180"
android:pivotY="150"
android:pivotX="150"
android:duration="5000">
</rotate>
<scale android:fromXScale="0"
android:fromYScale="0"
android:toXScale="1"
android:toYScale="1"
android:pivotX="150"
android:pivotY="150"
android:duration="5000">
</scale>
</set>
ビューレイヤーの処理:操作の結果は、同僚による(透明度、回転、ズーム)です。
private fun animationSet(){
//加载
val animation = AnimationUtils.loadAnimation(this, R.anim.my_toget__animat)
tv_animator_view.startAnimation(animation)
}
これはxmlタイプなしで実行でき、次のような動的コードを使用できます。
private fun animationSet(){
val rotateAnimation = RotateAnimation(0F, 180F, 150F, 150F)
val alphaAnimation = AlphaAnimation(1.0F, 0F)
val scaleAnimation = ScaleAnimation(0F, 1F, 0F, 1F, 150F, 150F)
//多个动画 放进 AnimationSet
val animationSet = AnimationSet(true)
animationSet.addAnimation(rotateAnimation)
animationSet.addAnimation(alphaAnimation)
animationSet.addAnimation(scaleAnimation)
animationSet.duration = 5000
tv_animator_view.startAnimation(animationSet)
}
動的コードによってAnimationSetコレクションを設定し、必要なアニメーションをそれに入れます。効果は同じです
複数のアニメーションが順番に再生されます。
順次再生のアイデアは、xmlのdelayメソッドを使用して、startOffsetによるアニメーションの遅延実行を指定することです
といった:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0"
android:toAlpha="1"
android:duration="3000"
android:fillAfter="true">
</alpha>
<!--第2个动画延迟3000毫秒-->
<rotate
android:startOffset="3000"
android:fromDegrees="0"
android:toDegrees="180"
android:pivotY="150"
android:pivotX="150"
android:duration="3000"
android:fillAfter="true">
</rotate>
</set>
読み込み設定の使用法は同じなので、投稿しません
コードを使用してシーケンスを設定し、最初のアニメーションの完了を監視してから、2番目のアニメーションを実行します
private fun animationOrder(){
val rotateAnimation = RotateAnimation(0F, 180F, 150F, 150F)
rotateAnimation.fillAfter = true
rotateAnimation.duration = 5000
rotateAnimation.setAnimationListener(object :Animation.AnimationListener{
override fun onAnimationRepeat(animation: Animation?) {
//动画重复
}
override fun onAnimationEnd(animation: Animation?) {
//动画结束
val alphaAnimation = AlphaAnimation(1.0F, 0F)
alphaAnimation.fillAfter = true
alphaAnimation.duration = 5000
tv_animator_view.startAnimation(alphaAnimation)
}
override fun onAnimationStart(animation: Animation?) {
//动画开始
}
})
tv_animator_view.startAnimation(rotateAnimation)
}
=======【【レイアウトアニメーション】==========
ViewGroupに作用し、ViewGroupのアニメーションを指定します。そのすべての子要素は、ファクトリーから出るときにこのアニメーション効果を持ちます
たとえば、RecycleViewが指定されている場合、各アイテムには
たとえば、ViewGroupが指定されている場合、各子ビューには
まず、layoutAnimationを作成します。anim/ layout_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="1"
android:animationOrder="random"
android:animation="@anim/alpha_ani">
<!--
delay: 每个子View时间间隔 如果有多个子view的话,如果设定的动画周期是 duration = 1000毫秒,
如果 delay=0.1,则下一个子View 会在100(duration * delay)毫秒执行动画
animationOrder:子view经常顺序,normal是最前面的先进来,
reverse是最后的先进来
random 正看英文就知道。。。。哈哈
顺序就是View.getChildView(index) 里面的这个index
-->
</layoutAnimation>
layoutAnimationを作成します。anim/ alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<!--透明
fromAlpha:开始时透明度 0.0- 1.0 0.0全透明 1.0不透明
toAlpha: 结束时透明度 0.0- 1.0
duration:动画持续时间 单位 毫秒
fillAfter:动画结束后是否停留在结束位置,true停留
-->
<alpha android:fromAlpha="0"
android:toAlpha="1"
android:duration="5000"
>
</alpha>
</set>
親レイアウトレイアウトファイル:
<android.support.constraint.ConstraintLayout
android:id="@+id/tv_animator_contain"
android:layout_width="0dp"
android:layout_height="300px"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layoutAnimation="@anim/layout_animation"
android:visibility="invisible"
>
<TextView
android:id="@+id/tv_animator_view"
android:layout_width="300px"
android:layout_height="300px"
android:background="@color/color_00a3f3"
android:text="目标动画1"
android:textColor="@color/color_7e4513"
android:gravity="center"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/tv_animator_view2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"/>
<TextView
android:id="@+id/tv_animator_view2"
android:layout_width="300px"
android:layout_height="300px"
android:background="@color/color_00a3f3"
android:text="目标动画1"
android:textColor="@color/color_7e4513"
android:gravity="center"
app:layout_constraintLeft_toRightOf="@id/tv_animator_view"
app:layout_constraintRight_toLeftOf="@id/tv_animator_view3"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"/>
<TextView
android:id="@+id/tv_animator_view3"
android:layout_width="300px"
android:layout_height="300px"
android:background="@color/color_00a3f3"
android:text="目标动画1"
android:textColor="@color/color_7e4513"
android:gravity="center"
app:layout_constraintLeft_toRightOf="@id/tv_animator_view2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"/>
</android.support.constraint.ConstraintLayout>
注意!! 親レイアウトの 可視性=非表示、親レイアウトが可視になると、3つの子ビューが表示されます
もちろん、現れる形はアニメーションの形です。。。
コードで呼び出す:
private fun layoutAnimation() {
tv_animator_contain.visibility = View.VISIBLE
}
親レイアウトを表示するだけで、すべての子ビューにアニメーション効果が表示されます。。。。
LayoutAnimationControllerを使用して、親レイアウトにレイアウトを設定することもできません
コードに直接:
private fun layoutAnimation() {
val loadAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha_ani)
val animationController = LayoutAnimationController(loadAnimation)
animationController.delay = 0.1F
animationController.order = LayoutAnimationController.ORDER_NORMAL
tv_animator_contain.layoutAnimation = animationController
tv_animator_contain.visibility = View.VISIBLE
}
注意!!!!!!!
コードが指す alpha_ani.xml直接、アニメーションファイルにない意味、 layoutAnimation
================== [ フレームアニメーション ] =========================
まず、フレームアニメーションは動画再生に似ており、1秒間に26枚の画像が表示され、肉眼で見える効果は動画です。
フレームアニメーションは、すべての画像を一度にメモリに読み込み、期間が設定されるたびに次の画像を表示します。。。
推奨されません!!!それはメモリを消費するからです!!!!!!
まず、ドローアブルディレクトリにあるフレームアニメーションを作成します。。。
次に、アニメーションリストを選択します
その後
コントロールでの使用:
/**
* 帧动画
* */
private fun startFrameAni() {
//先设置
tv_animator_view.setBackgroundResource(R.drawable.frame_animation)
//再获取 强转成 AnimationDrawable
val background = tv_animator_view.background as AnimationDrawable
//开启动画
background.start()
}
繰り返しますが、写真が多すぎると、簡単にOOMにつながります
フレームアニメーションを使用する必要がある場合は、必要なドローアブルのすべてのIDをリストに入れることができます
次に、数秒ごとに自分でタイマーを記述し(ハンドラーを使用するなど)、IDを介してドローアブルを取得して画像を表示し、一度にすべての画像がメモリに読み込まれるのを回避します。。。。
大丈夫。。。。。。ここです
次の記事が書かれています:属性アニメーション
上記のコードはプロテストでは問題ありませんが、問題がある場合は修正のためにメッセージを残してください、、、ありがとうございます!!!!