ดูภาพเคลื่อนไหว
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ลองใช้วิธีเขียน
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีใช้ภาพเคลื่อนไหวใน Compose
คุณสามารถใช้ระบบมุมมองภาพเคลื่อนไหวเพื่อสร้างภาพเคลื่อนไหว 2 ภาพใน "มุมมอง" ได้ ภาพเคลื่อนไหวทวีน (Tween) จะคำนวณภาพเคลื่อนไหวด้วยข้อมูล เช่น จุดเริ่มต้น จุดสิ้นสุด ขนาด การหมุน และลักษณะทั่วไปอื่นๆ ของภาพเคลื่อนไหว
ภาพเคลื่อนไหว 2 ภาพสามารถทำการแปลงรูปแบบง่ายๆ (ตำแหน่ง ขนาด การหมุน และความโปร่งใส) กับเนื้อหาของออบเจ็กต์ View ได้ ดังนั้น หากมีออบเจ็กต์ TextView คุณจะย้าย หมุน ขยาย หรือย่อข้อความได้ หากรูปภาพมีภาพพื้นหลัง ภาพพื้นหลังจะเปลี่ยนไปพร้อมข้อความ animation package จะระบุชั้นเรียนทั้งหมดที่ใช้ในภาพเคลื่อนไหวสำหรับเด็กตอนต้น
ลำดับวิธีการเกี่ยวกับภาพเคลื่อนไหวจะกำหนดภาพเคลื่อนไหว Tween ที่กำหนดโดยโค้ด XML หรือ Android เช่นเดียวกับการกำหนดเลย์เอาต์ เราขอแนะนำให้ใช้ไฟล์ XML เนื่องจากสามารถอ่านได้ นำกลับมาใช้ซ้ำ และสลับได้ง่ายกว่าการฮาร์ดโค้ดภาพเคลื่อนไหว ในตัวอย่างด้านล่าง เราใช้ XML (หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดภาพเคลื่อนไหวในโค้ดแอปพลิเคชันแทน XML โปรดดูคลาส AnimationSet และคลาสย่อย Animation อื่นๆ)
คำสั่งภาพเคลื่อนไหวจะกำหนดการเปลี่ยนรูปแบบที่คุณต้องการให้เกิดขึ้น เวลาที่จะเกิด และระยะเวลาที่ควรใช้ การเปลี่ยนรูปแบบอาจเป็นแบบเรียงตามลำดับหรือพร้อมกัน ตัวอย่างเช่น คุณสามารถให้เนื้อหาของ TextView ย้ายจากซ้ายไปขวา แล้วหมุน 180 องศา หรือให้ข้อความย้ายและหมุนพร้อมกันก็ได้ การเปลี่ยนรูปแบบแต่ละรายการจะใช้ชุดพารามิเตอร์ที่เฉพาะเจาะจงสําหรับการเปลี่ยนรูปแบบดังกล่าว (ขนาดเริ่มต้นและขนาดสุดท้ายสําหรับการเปลี่ยนขนาด มุมเริ่มต้นและมุมสิ้นสุดสําหรับการหมุน และอื่นๆ) รวมถึงชุดพารามิเตอร์ทั่วไป (เช่น เวลาเริ่มต้นและระยะเวลา) หากต้องการให้การเปลี่ยนรูปแบบหลายรายการเกิดขึ้นพร้อมกัน ให้กำหนดเวลาเริ่มต้นเดียวกัน หากต้องการให้เปลี่ยนรูปแบบตามลำดับ ให้คำนวณเวลาเริ่มต้นบวกระยะเวลาของการเปลี่ยนรูปแบบก่อนหน้า
ไฟล์ XML ภาพเคลื่อนไหวอยู่ในไดเรกทอรี res/anim/ ของโปรเจ็กต์ Android ไฟล์ต้องมีองค์ประกอบรูทรายการเดียว ซึ่งอาจเป็น <alpha>, <scale>, <translate>, <rotate>, องค์ประกอบอินเทอร์โพเลเตอร์ หรือองค์ประกอบ <set> รายการเดียวที่เก็บกลุ่มองค์ประกอบเหล่านี้ (ซึ่งอาจรวมถึง <set> รายการอื่น) โดยค่าเริ่มต้น ระบบจะใช้คำสั่งภาพเคลื่อนไหวทั้งหมดพร้อมกัน หากต้องการให้แสดงตามลำดับ คุณต้องระบุแอตทริบิวต์ startOffset ดังที่แสดงในตัวอย่างด้านล่าง
XML ต่อไปนี้จาก ApiDemos รายการใดรายการหนึ่งใช้เพื่อยืด จากนั้นหมุนและบิดออบเจ็กต์ View พร้อมกัน
<set 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/decelerate_interpolator">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="400"
android:fillBefore="false" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="700"
android:duration="400" />
</set>
</set>
พิกัดหน้าจอ (ในตัวอย่างนี้ไม่ได้ใช้) คือ (0,0) ที่มุมซ้ายบน และจะเพิ่มขึ้นเมื่อคุณเลื่อนลงไปด้านล่างและไปทางขวา
ค่าบางอย่าง เช่น pivotX สามารถระบุโดยสัมพันธ์กับออบเจ็กต์เองหรือสัมพันธ์กับออบเจ็กต์หลัก ตรวจสอบว่าใช้รูปแบบที่ถูกต้องตามที่ต้องการ ("50" สำหรับ 50% เมื่อเทียบกับเทมเพลตหลัก หรือ "50%" สำหรับ 50% เมื่อเทียบกับรายการหลัก)
คุณกําหนดวิธีการนําการเปลี่ยนรูปแบบไปใช้ในช่วงเวลาหนึ่งๆ ได้โดยกําหนด Interpolator Android มีคลาสย่อย Interpolator หลายคลาสที่ระบุเส้นโค้งความเร็วต่างๆ เช่น AccelerateInterpolator ที่บอกให้การเปลี่ยนรูปแบบเริ่มต้นช้าๆ แล้วค่อยๆ เร็วขึ้น โดยแต่ละแอตทริบิวต์มีค่าแอตทริบิวต์ที่ใช้ใน XML ได้
เมื่อบันทึก XML นี้เป็น hyperspace_jump.xml ในไดเรกทอรี res/anim/ ของโปรเจ็กต์ โค้ดต่อไปนี้จะอ้างอิงและนำไปใช้กับออบเจ็กต์ ImageView จากเลย์เอาต์
Kotlin
AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}
Java
ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);
นอกเหนือจาก startAnimation() แล้ว คุณยังกำหนดเวลาเริ่มต้นของภาพเคลื่อนไหวด้วย Animation.setStartTime()View.setAnimation()
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไวยากรณ์ XML แท็กและแอตทริบิวต์ที่ใช้ได้ โปรดดูที่ทรัพยากรภาพเคลื่อนไหว
หมายเหตุ: ไม่ว่าภาพเคลื่อนไหวจะเคลื่อนไหวหรือปรับขนาดอย่างไร ขอบเขตของมุมมองที่เก็บภาพเคลื่อนไหวจะไม่ปรับโดยอัตโนมัติเพื่อให้พอดีกับภาพเคลื่อนไหว
อย่างไรก็ตาม ภาพเคลื่อนไหวจะยังคงวาดเกินขอบเขตของมุมมองและจะไม่ถูกตัด
อย่างไรก็ตาม การตัดจะเกิดขึ้นหากภาพเคลื่อนไหวเกินขอบเขตของมุมมองหลัก
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2025-07-27 UTC"],[],[],null,["# View Animation\n\nTry the Compose way \nJetpack Compose is the recommended UI toolkit for Android. Learn how to use Animations in Compose. \n[Animate properties →](/develop/ui/compose/animation/value-based) \n\nYou can use the view animation system to perform tweened animation on Views. Tween animation\ncalculates the animation with information such as the start point, end point, size, rotation, and\nother common aspects of an animation.\n\nA tween animation can perform a series of simple transformations (position, size, rotation,\nand transparency) on the contents of a View object. So, if you have a [TextView](/reference/android/widget/TextView) object, you can move, rotate, grow, or shrink the text. If it has a\nbackground image, the background image will be transformed along with the text. The [animation package](/reference/android/view/animation/package-summary) provides all the classes used in a tween animation.\n\nA sequence of animation instructions defines the tween animation, defined by either XML or\nAndroid code. As with defining a layout, an XML file is recommended because it's more readable,\nreusable, and swappable than hard-coding the animation. In the example below, we use XML. (To\nlearn more about defining an animation in your application code, instead of XML, refer to the\n[AnimationSet](/reference/android/view/animation/AnimationSet) class and other [Animation](/reference/android/view/animation/Animation) subclasses.)\n\nThe animation instructions define the transformations that you want to occur, when they will\noccur, and how long they should take to apply. Transformations can be sequential or simultaneous\n- for example, you can have the contents of a TextView move from left to right, and then rotate\n180 degrees, or you can have the text move and rotate simultaneously. Each transformation takes a\nset of parameters specific for that transformation (starting size and ending size for size\nchange, starting angle and ending angle for rotation, and so on), and also a set of common\nparameters (for instance, start time and duration). To make several transformations happen\nsimultaneously, give them the same start time; to make them sequential, calculate the start time\nplus the duration of the preceding transformation.\n\nThe animation XML file belongs in the `res/anim/` directory of your Android\nproject. The file must have a single root element: this will be either a single\n`\u003calpha\u003e`, `\u003cscale\u003e`, `\u003ctranslate\u003e`,\n`\u003crotate\u003e`, interpolator element, or `\u003cset\u003e` element that holds\ngroups of these elements (which may include another `\u003cset\u003e`). By default, all\nanimation instructions are applied simultaneously. To make them occur sequentially, you must\nspecify the `startOffset` attribute, as shown in the example below.\n\nThe following XML from one of the ApiDemos is used to stretch, then simultaneously spin and\nrotate a View object. \n\n```xml\n\u003cset android:shareInterpolator=\"false\"\u003e\n \u003cscale\n android:interpolator=\"@android:anim/accelerate_decelerate_interpolator\"\n android:fromXScale=\"1.0\"\n android:toXScale=\"1.4\"\n android:fromYScale=\"1.0\"\n android:toYScale=\"0.6\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:fillAfter=\"false\"\n android:duration=\"700\" /\u003e\n \u003cset android:interpolator=\"@android:anim/decelerate_interpolator\"\u003e\n \u003cscale\n android:fromXScale=\"1.4\"\n android:toXScale=\"0.0\"\n android:fromYScale=\"0.6\"\n android:toYScale=\"0.0\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:startOffset=\"700\"\n android:duration=\"400\"\n android:fillBefore=\"false\" /\u003e\n \u003crotate\n android:fromDegrees=\"0\"\n android:toDegrees=\"-45\"\n android:toYScale=\"0.0\"\n android:pivotX=\"50%\"\n android:pivotY=\"50%\"\n android:startOffset=\"700\"\n android:duration=\"400\" /\u003e\n \u003c/set\u003e\n\u003c/set\u003e\n```\n\nScreen coordinates (not used in this example) are (0,0) at the upper left hand corner, and\nincrease as you go down and to the right.\n\nSome values, such as pivotX, can be specified relative to the object itself or relative to the\nparent. Be sure to use the proper format for what you want (\"50\" for 50% relative to the parent,\nor \"50%\" for 50% relative to itself).\n\nYou can determine how a transformation is applied over time by assigning an [Interpolator](/reference/android/view/animation/Interpolator). Android includes several Interpolator subclasses that\nspecify various speed curves: for instance, [AccelerateInterpolator](/reference/android/view/animation/AccelerateInterpolator)\ntells a transformation to start slow and speed up. Each one has an attribute value that can be\napplied in the XML.\n\nWith this XML saved as `hyperspace_jump.xml` in the `res/anim/`\ndirectory of the project, the following code will reference it and apply it to an [ImageView](/reference/android/widget/ImageView) object from the layout. \n\n### Kotlin\n\n```kotlin\nAnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation -\u003e\n findViewById\u003cImageView\u003e(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)\n}\n```\n\n### Java\n\n```java\nImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);\nAnimation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);\nspaceshipImage.startAnimation(hyperspaceJumpAnimation);\n```\n\nAs an alternative to `startAnimation()`, you can define a starting time for the\nanimation with [Animation.setStartTime()](/reference/android/view/animation/Animation#setStartTime(long)), then assign the animation to the View with [View.setAnimation()](/reference/android/view/View#setAnimation(android.view.animation.Animation)).\n\nFor more information on the XML syntax, available tags and attributes, see [Animation Resources](/guide/topics/resources/animation-resource).\n\n**Note:** Regardless of how your animation may move or resize, the\nbounds of the View that holds your animation will not automatically adjust to accommodate it.\nEven so, the animation will still be drawn beyond the bounds of its View and will not be clipped.\nHowever, clipping *will occur* if the animation exceeds the bounds of the parent View."]]
