ทรัพยากรภาพเคลื่อนไหวสามารถกำหนดภาพเคลื่อนไหว 1 ใน 2 ประเภทต่อไปนี้
- ภาพเคลื่อนไหวของพร็อพเพอร์ตี้
- สร้างภาพเคลื่อนไหวโดยการแก้ไขค่าคุณสมบัติของวัตถุในระยะเวลาที่กำหนด
ด้วย
Animator
- ดูภาพเคลื่อนไหว
-
ภาพเคลื่อนไหวที่คุณใช้กรอบมุมมองภาพเคลื่อนไหวได้มี 2 ประเภท ดังนี้
- ภาพเคลื่อนไหว Tween: สร้างภาพเคลื่อนไหวด้วยการเปลี่ยนรูปแบบต่างๆ ในรูปภาพเดียว
ด้วย
Animation
- ภาพเคลื่อนไหวของเฟรม: สร้างภาพเคลื่อนไหวโดยแสดงลำดับของรูปภาพตามลำดับ
ด้วย
AnimationDrawable
- ภาพเคลื่อนไหว Tween: สร้างภาพเคลื่อนไหวด้วยการเปลี่ยนรูปแบบต่างๆ ในรูปภาพเดียว
ด้วย
ภาพเคลื่อนไหวของพร็อพเพอร์ตี้
ภาพเคลื่อนไหวที่กำหนดไว้ใน XML ซึ่งแก้ไขคุณสมบัติของออบเจ็กต์เป้าหมาย เช่น สีพื้นหลังหรือค่าอัลฟ่าผ่านระยะเวลาที่กำหนด
- ตำแหน่งที่ตั้งไฟล์:
- ชื่อไฟล์จะใช้เป็นรหัสทรัพยากร
- ประเภทข้อมูลทรัพยากรที่คอมไพล์:
- ตัวชี้แหล่งข้อมูลไปยัง
ValueAnimator
,ObjectAnimator
หรือAnimatorSet
- การอ้างอิงทรัพยากร:
-
ในโค้ดแบบ Java หรือ Kotlin:
R.animator.filename
ใน XML:@[package:]animator/filename
- ไวยากรณ์:
-
<set android:ordering=["together" | "sequentially"]> <objectAnimator android:propertyName="string" android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["restart" | "reverse"] android:valueType=["intType" | "floatType"]/> <animator android:duration="int" android:valueFrom="float | int | color" android:valueTo="float | int | color" android:startOffset="int" android:repeatCount="int" android:repeatMode=["restart" | "reverse"] android:valueType=["intType" | "floatType"]/> <set> ... </set> </set>
ไฟล์ต้องมีองค์ประกอบรากเดียว นั่นคือ
<set>
,<objectAnimator>
หรือ<valueAnimator>
คุณสามารถ จัดกลุ่มองค์ประกอบภาพเคลื่อนไหวเข้าด้วยกันภายในองค์ประกอบ<set>
รวมถึงองค์ประกอบอื่นๆ องค์ประกอบ<set>
- องค์ประกอบ:
- ตัวอย่าง:
-
ไฟล์ XML ที่บันทึกไว้ที่
res/animator/property_animator.xml
:<set android:ordering="sequentially"> <set> <objectAnimator android:propertyName="x" android:duration="500" android:valueTo="400" android:valueType="intType"/> <objectAnimator android:propertyName="y" android:duration="500" android:valueTo="300" android:valueType="intType"/> </set> <objectAnimator android:propertyName="alpha" android:duration="500" android:valueTo="1f"/> </set>
หากต้องการเรียกใช้ภาพเคลื่อนไหวนี้ ให้เพิ่มทรัพยากร XML ในโค้ดให้สูงเกินจริงเป็นออบเจ็กต์
AnimatorSet
จากนั้นตั้งค่าออบเจ็กต์เป้าหมายสำหรับภาพเคลื่อนไหวทั้งหมด ก่อนเริ่มตั้งค่าภาพเคลื่อนไหว การเรียกใช้setTarget()
จะตั้งค่าออบเจ็กต์เป้าหมายเดียวสำหรับผู้เผยแพร่โฆษณาย่อยทั้งหมดของAnimatorSet
เพื่ออำนวยความสะดวก โค้ดต่อไปนี้แสดงวิธีดำเนินการKotlin
val set: AnimatorSet = AnimatorInflater.loadAnimator(myContext, R.animator.property_animator) .apply { setTarget(myObject) start() }
Java
AnimatorSet set = (AnimatorSet) AnimatorInflater.loadAnimator(myContext, R.animator.property_animator); set.setTarget(myObject); set.start();
- ดูเพิ่มเติม
-
- ภาพรวมภาพเคลื่อนไหวของพร็อพเพอร์ตี้
- การสาธิต API สำหรับตัวอย่าง ของวิธีใช้ระบบภาพเคลื่อนไหวของพร็อพเพอร์ตี้
res/animator/filename.xml
ดูภาพเคลื่อนไหว
เฟรมเวิร์กภาพเคลื่อนไหวแบบมุมมองรองรับทั้งภาพเคลื่อนไหวแบบ Tween และแบบเฟรมต่อเฟรม ซึ่งทั้ง 2 แบบประกาศไว้ ในรูปแบบ XML ส่วนต่อไปนี้จะอธิบายวิธีใช้ทั้ง 2 วิธี
แอนิเมชันในช่วง Tween
ภาพเคลื่อนไหวที่กำหนดไว้ใน XML ซึ่งทำการเปลี่ยนภาพในกราฟิก เช่น การหมุน การค่อยๆ เลือนหายไป เคลื่อนไหว และยืดเส้นยืดสาย
- ตำแหน่งที่ตั้งไฟล์:
- ชื่อไฟล์จะใช้เป็นรหัสทรัพยากร
- ประเภทข้อมูลทรัพยากรที่คอมไพล์:
- ตัวชี้แหล่งข้อมูลไปยัง
Animation
- การอ้างอิงทรัพยากร:
-
ใน Java:
R.anim.filename
ใน XML:@[package:]anim/filename
- ไวยากรณ์:
-
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@[package:]anim/interpolator_resource" android:shareInterpolator=["true" | "false"] > <alpha android:fromAlpha="float" android:toAlpha="float" /> <scale android:fromXScale="float" android:toXScale="float" android:fromYScale="float" android:toYScale="float" android:pivotX="float" android:pivotY="float" /> <translate android:fromXDelta="float" android:toXDelta="float" android:fromYDelta="float" android:toYDelta="float" /> <rotate android:fromDegrees="float" android:toDegrees="float" android:pivotX="float" android:pivotY="float" /> <set> ... </set> </set>
ไฟล์ต้องมีองค์ประกอบรากเดียว นั่นคือ
<alpha>
<scale>
<translate>
องค์ประกอบ<rotate>
หรือ<set>
ที่เก็บรักษา กลุ่ม (หรือกลุ่ม) ขององค์ประกอบภาพเคลื่อนไหวอื่นๆ (รวมถึงองค์ประกอบ<set>
ที่ฝังอยู่) - องค์ประกอบ:
- ตัวอย่าง:
-
ไฟล์ XML ที่บันทึกไว้ที่
res/anim/hyperspace_jump.xml
:<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false"> <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromXScale="1.0" android:toXScale="1.4" android:fromYScale="1.0" android:toYScale="0.6" android:pivotX="50%" android:pivotY="50%" android:fillAfter="false" android:duration="700" /> <set android:interpolator="@android:anim/accelerate_interpolator" android:startOffset="700"> <scale android:fromXScale="1.4" android:toXScale="0.0" android:fromYScale="0.6" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="400" /> <rotate android:fromDegrees="0" android:toDegrees="-45" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:duration="400" /> </set> </set>
รหัสแอปพลิเคชันต่อไปนี้ใช้ภาพเคลื่อนไหวกับ
ImageView
และ เริ่มภาพเคลื่อนไหวKotlin
val image: ImageView = findViewById(R.id.image) val hyperspaceJump: Animation = AnimationUtils.
loadAnimation
(this, R.anim.hyperspace_jump) image.startAnimation
(hyperspaceJump)Java
ImageView image = (ImageView) findViewById(R.id.image); Animation hyperspaceJump = AnimationUtils.
loadAnimation
(this, R.anim.hyperspace_jump); image.startAnimation
(hyperspaceJump); - ดูเพิ่มเติม
res/anim/filename.xml
อินเตอร์โพเลเตอร์
ตัวกำหนดช่วงคือตัวแก้ไขภาพเคลื่อนไหวที่กำหนดไว้ใน XML ซึ่งส่งผลต่ออัตราการเปลี่ยนแปลงใน ภาพเคลื่อนไหว ซึ่งจะช่วยให้เอฟเฟกต์ภาพเคลื่อนไหวที่มีอยู่สามารถเร่ง ลดความเร็ว ทำซ้ำ ตีกลับ ฯลฯ
ตัวกำกับกลางจะใช้กับองค์ประกอบของภาพเคลื่อนไหวที่มี android:interpolator
ค่าที่เป็นตัวอ้างอิงไปยังทรัพยากรตัวกำหนด
ตัวกระทำการประมาณค่าทั้งหมดที่พร้อมใช้งานใน Android เป็นคลาสย่อยของคลาส Interpolator
สำหรับคลาสตัวกำหนดแต่ละคลาส Android
มีทรัพยากรสาธารณะที่คุณสามารถอ้างอิงเพื่อใช้อินเตอร์โพลเตอร์กับภาพเคลื่อนไหว
โดยใช้แอตทริบิวต์ android:interpolator
ตารางต่อไปนี้ระบุทรัพยากรที่จะใช้สำหรับตัวกำหนดแต่ละตัว
คลาสอินเตอร์โพเลเตอร์ | รหัสทรัพยากร |
---|---|
AccelerateDecelerateInterpolator |
@android:anim/accelerate_decelerate_interpolator |
AccelerateInterpolator |
@android:anim/accelerate_interpolator |
AnticipateInterpolator |
@android:anim/anticipate_interpolator |
AnticipateOvershootInterpolator |
@android:anim/anticipate_overshoot_interpolator |
BounceInterpolator |
@android:anim/bounce_interpolator |
CycleInterpolator |
@android:anim/cycle_interpolator |
DecelerateInterpolator |
@android:anim/decelerate_interpolator |
LinearInterpolator |
@android:anim/linear_interpolator |
OvershootInterpolator |
@android:anim/overshoot_interpolator |
คุณใช้แอตทริบิวต์เหล่านี้กับแอตทริบิวต์ android:interpolator
ได้โดยทำดังนี้
<set android:interpolator="@android:anim/accelerate_interpolator"> ... </set>
ตัวการประมาณค่าที่กำหนดเอง
หากคุณไม่พึงพอใจกับตัวกำหนดอัตราการเปลี่ยนแปลงที่แพลตฟอร์มมีให้ คุณสามารถสร้างทรัพยากรตัวกำหนดได้เองโดยมีแอตทริบิวต์ที่ได้รับการแก้ไข
ตัวอย่างเช่น คุณสามารถปรับอัตรา
ความเร่งสำหรับAnticipateInterpolator
หรือปรับจำนวน
สำหรับ CycleInterpolator
วิธีการคือ
สร้างทรัพยากรตัวแทรกกลางของคุณเองในไฟล์ XML
- ตำแหน่งที่ตั้งไฟล์:
- ชื่อไฟล์จะใช้เป็นรหัสทรัพยากร
- ประเภทข้อมูลทรัพยากรที่คอมไพล์:
- ตัวชี้แหล่งข้อมูลไปยังออบเจ็กต์ตัวกำหนดที่เกี่ยวข้อง
- การอ้างอิงทรัพยากร:
-
ใน XML:
@[package:]anim/filename
- ไวยากรณ์:
-
<?xml version="1.0" encoding="utf-8"?> <InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android" android:attribute_name="value" />
หากคุณไม่ใช้แอตทริบิวต์ใดๆ ตัวกำหนดกลางของคุณจะทำงานในลักษณะเดียวกับ ระบุโดยแพลตฟอร์มตามตารางก่อนหน้านี้
- องค์ประกอบ:
- สังเกตว่าการติดตั้งใช้งาน
Interpolator
แต่ละรายการ ที่กำหนดไว้ใน XML มีชื่อที่ขึ้นต้นด้วยตัวอักษรพิมพ์เล็ก - ตัวอย่าง:
-
ไฟล์ XML ที่บันทึกไว้ที่
res/anim/my_overshoot_interpolator.xml
:<?xml version="1.0" encoding="utf-8"?> <overshootInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:tension="7.0" />
XML ภาพเคลื่อนไหวนี้ใช้ตัวกั้นกลาง
<scale xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@anim/my_overshoot_interpolator" android:fromXScale="1.0" android:toXScale="3.0" android:fromYScale="1.0" android:toYScale="3.0" android:pivotX="50%" android:pivotY="50%" android:duration="700" />
res/anim/filename.xml
ภาพเคลื่อนไหวของเฟรม
ภาพเคลื่อนไหวที่กำหนดไว้ใน XML ที่แสดงลำดับรูปภาพตามลำดับเหมือนภาพยนตร์
- ตำแหน่งที่ตั้งไฟล์:
- ชื่อไฟล์จะใช้เป็นรหัสทรัพยากร
- ประเภทข้อมูลทรัพยากรที่คอมไพล์:
- ตัวชี้แหล่งข้อมูลไปยัง
AnimationDrawable
- การอ้างอิงทรัพยากร:
-
ใน Java:
R.drawable.filename
ใน XML:@[package:]drawable.filename
- ไวยากรณ์:
-
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource_name" android:duration="integer" /> </animation-list>
- องค์ประกอบ:
- ตัวอย่าง:
-
ไฟล์ XML ที่บันทึกไว้ที่
res/drawable/rocket_thrust.xml
:<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/rocket_thrust1" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust2" android:duration="200" /> <item android:drawable="@drawable/rocket_thrust3" android:duration="200" /> </animation-list>
โค้ดของแอปพลิเคชันต่อไปนี้ตั้งค่าภาพเคลื่อนไหวเป็นพื้นหลังสำหรับ
View
จากนั้นเล่นภาพเคลื่อนไหวKotlin
val rocketImage: ImageView = findViewById(R.id.rocket_image) rocketImage.
setBackgroundResource
(R.drawable.rocket_thrust) val rocketAnimation = rocketImage.background
if (rocketAnimation isAnimatable
) { rocketAnimation.start()
}Java
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image); rocketImage.
setBackgroundResource
(R.drawable.rocket_thrust); rocketAnimation = rocketImage.getBackground()
; if (rocketAnimation instanceofAnimatable
) { ((Animatable)rocketAnimation).start()
; } - ดูเพิ่มเติม
res/drawable/filename.xml