Tài nguyên ảnh động có thể xác định một trong hai loại ảnh động:
- Ảnh động thuộc tính
- Tạo ảnh động bằng cách sửa đổi giá trị thuộc tính của một đối tượng trong một khoảng thời gian nhất định bằng
Animator
. - Chế độ xem ảnh động
-
Bạn có thể thực hiện hai loại ảnh động với chế độ xem khung ảnh động:
- Ảnh động dạng tween: Tạo một ảnh động bằng cách thực hiện một loạt các phép biến đổi trên một ảnh duy nhất bằng
Animation
- Ảnh động dạng khung: hoặc tạo một ảnh động bằng cách hiện một trình tự hình ảnh theo thứ tự bằng
AnimationDrawable
.
- Ảnh động dạng tween: Tạo một ảnh động bằng cách thực hiện một loạt các phép biến đổi trên một ảnh duy nhất bằng
Ảnh động thuộc tính
Một ảnh động được xác định trong tệp XML có chức năng sửa đổi các thuộc tính của đối tượng mục tiêu, chẳng hạn như màu nền hoặc giá trị alpha trong một khoảng thời gian nhất định.
- vị trí tệp:
res/animator/filename.xml
Tên tệp sẽ được dùng làm mã nhận dạng tài nguyên.- loại dữ liệu tài nguyên được biên dịch:
- Con trỏ tài nguyên đến
ValueAnimator
,ObjectAnimator
hoặcAnimatorSet
. - mã tham chiếu tài nguyên:
-
Trong mã dựa trên Java hoặc Kotlin:
R.animator.filename
Trong XML:@[package:]animator/filename
- cú pháp:
-
<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>
Tệp phải có một phần tử gốc:
<set>
,<objectAnimator>
hoặc<valueAnimator>
. Bạn có thể nhóm các phần tử ảnh động lại với nhau trong phần tử<set>
, bao gồm cả các phần tử<set>
khác. - phần tử:
- ví dụ:
-
Tệp XML được lưu vào 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>
Để chạy ảnh động này, bạn phải tăng cường tài nguyên XML trong mã thành đối tượng
AnimatorSet
, sau đó đặt đối tượng mục tiêu cho tất cả các ảnh động trước khi bắt đầu bộ ảnh động. Việc gọisetTarget()
sẽ đặt một đối tượng mục tiêu duy nhất cho tất cả thành phần con củaAnimatorSet
để thuận tiện. Mã sau đây minh hoạ cách thực hiện việc này: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();
- xem thêm:
-
- Ảnh động thuộc tính
- Bản minh hoạ API cho các ví dụ về cách sử dụng hệ thống ảnh động thuộc tính.
Chế độ xem ảnh động
Chế độ xem khung ảnh động hỗ trợ cả ở dạng tween lẫn dạng từng khung ảnh động, cả hai đạng này đều có thể được khai báo trong tệp XML. Các phần sau đây mô tả cách sử dụng cả hai phương pháp.Ảnh động dạng Tween
Một ảnh động được xác định trong XML thực hiện các thao tác chuyển đổi như xoay, làm mờ, di chuyển và kéo giãn trên hình ảnh.
- vị trí tệp:
res/anim/filename.xml
Tên tệp sẽ được dùng làm mã nhận dạng tài nguyên.- loại dữ liệu tài nguyên được biên dịch:
- Con trỏ tài nguyên đến
Animation
. - mã tham chiếu tài nguyên:
-
Trong Java:
R.anim.filename
Trong XML:@[package:]anim/filename
- cú pháp:
-
<?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>
Tệp phải có một phần tử gốc:
<alpha>
,<scale>
,<translate>
,<rotate>
hoặc<set>
, lưu giữ một nhóm (hoặc nhóm) các phần tử ảnh động khác (thậm chí là các phần tử<set>
lồng nhau). - phần tử:
- ví dụ:
-
Tệp XML được lưu vào 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>
Mã xử lý ứng dụng này sẽ áp dụng ảnh động cho
ImageView
và bắt đầu ảnh động: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); - xem thêm:
Bộ nội suy
Bộ nội suy là một công cụ sửa đổi ảnh động được xác định trong tệp XML ảnh hưởng đến tốc độ thay đổi trong ảnh động. Công cụ này cho phép các hiệu ứng ảnh động hiện có được tăng tốc, giảm tốc, lặp lại, đẩy trang, v.v.
Bộ nội suy được áp dụng cho phần tử ảnh động có thuộc tính android:interpolator
, giá trị của thuộc tính này tham chiếu đến tài nguyên của bộ nội suy.
Tất cả các bộ nội suy có trong Android đều là lớp con của lớp Interpolator
. Đối với mỗi lớp bộ nội suy, Android sẽ bao gồm một tài nguyên công khai mà bạn có thể tham chiếu để áp dụng bộ nội suy cho ảnh động bằng cách sử dụng thuộc tính android:interpolator
.
Bảng sau đây chỉ định tài nguyên để sử dụng cho từng bộ nội suy:
Lớp bộ nội suy | Mã tài nguyên |
---|---|
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 |
Dưới đây là cách bạn có thể áp dụng một trong các bộ này bằng thuộc tính android:interpolator
:
<set android:interpolator="@android:anim/accelerate_interpolator"> ... </set>
Bộ nội suy tuỳ chỉnh
Nếu không hài lòng với bộ nội suy do nền tảng cung cấp (liệt kê trong bảng ở trên), bạn có thể tạo tài nguyên bộ nội suy tuỳ chỉnh với các thuộc tính đã sửa đổi.
Chẳng hạn bạn có thể điều chỉnh tốc độ tăng tốc cho AnticipateInterpolator
hoặc điều chỉnh số chu kỳ cho CycleInterpolator
. Để làm điều đó, bạn cần tạo tài nguyên bộ nội suy của riêng mình trong một tệp XML.
- vị trí tệp:
res/anim/filename.xml
Tên tệp sẽ được dùng làm mã nhận dạng tài nguyên.- loại dữ liệu tài nguyên được biên dịch:
- Con trỏ tài nguyên đến đối tượng bộ nội suy tương ứng.
- mã tham chiếu tài nguyên:
-
Trong XML:
@[package:]anim/filename
- cú pháp:
-
<?xml version="1.0" encoding="utf-8"?> <InterpolatorName xmlns:android="http://schemas.android.com/apk/res/android" android:attribute_name="value" />
Nếu không áp dụng thuộc tính nào thì bộ nội suy của bạn sẽ hoạt động giống hệt các thuộc tính do nền tảng cung cấp (liệt kê trong bảng ở trên).
- phần tử:
- Lưu ý là mỗi quá trình triển khai
Interpolator
sẽ bắt đầu bằng tên ở dạng chữ thường, khi được xác định trong XML. - ví dụ:
-
Tệp XML được lưu vào
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 của ảnh động này sẽ áp dụng bộ nội suy:
<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" />
Ảnh động dạng khung
Ảnh động được xác định trong XML hiển thị một chuỗi hình ảnh theo thứ tự (như một thước phim).
- vị trí tệp:
res/drawable/filename.xml
Tên tệp sẽ được dùng làm mã nhận dạng tài nguyên.- loại dữ liệu tài nguyên được biên dịch:
- Con trỏ tài nguyên đến
AnimationDrawable
. - mã tham chiếu tài nguyên:
-
Trong Java:
R.drawable.filename
Trong XML:@[package:]drawable.filename
- cú pháp:
-
<?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>
- phần tử:
- ví dụ:
-
- Tệp XML được lưu vào
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>
- Mã xử lý ứng dụng này sẽ đặt ảnh động làm nền cho một Chế độ xem, sau đó phát ảnh động:
-
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()
; }
- Tệp XML được lưu vào
- xem thêm: