ทรัพยากรภาพเคลื่อนไหวสามารถกำหนดภาพเคลื่อนไหว 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
เพื่ออำนวยความสะดวก โค้ดต่อไปนี้แสดงวิธีดำเนินการ - ดูเพิ่มเติม
-
- ภาพรวมภาพเคลื่อนไหวของพร็อพเพอร์ตี้
- การสาธิต 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
และ เริ่มภาพเคลื่อนไหวval image: ImageView = findViewById(R.id.image)
val hyperspaceJump: Animation = AnimationUtils.loadAnimation
(this, R.anim.hyperspace_jump)
image.startAnimation
(hyperspaceJump)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
จากนั้นเล่นภาพเคลื่อนไหวval rocketImage: ImageView = findViewById(R.id.rocket_image)
rocketImage.setBackgroundResource
(R.drawable.rocket_thrust)
val rocketAnimation = rocketImage.background
if (rocketAnimation isAnimatable
) {
rocketAnimation.start()
}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