USS transisi

USS transisi mengubah nilai properti selama durasi tertentu. Mirip dengan CSS transition, UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary Toolkit mendukung banyak fungsi easing, durasi transisi variabel, dan penundaan transisi yang dapat dikonfigurasi. Anda dapat mengubah tampilan dan nuansa transisi dan menyesuaikan urutan di mana transisi terjadi. Anda dapat menggunakan fungsi easing untuk memicu animasi diskrit setiap saat transisi.

Important:

• Untuk properti yang Anda suplai dengan nilai dan unit, pastikan unit untuk nilai awal sesuai dengan unit untuk nilai akhir. Perhatikan perhatian khusus untuk transisi ke atau dari nilai default. Sebagai contoh, nilai default atribut translate adalah 0. Ini sangat menggunakan pixelsUnit terkecil dalam gambar komputer. Ukuran piksel tergantung pada resolusi layar Anda. Pencahayaan pixel dihitung pada setiap piksel layar. More info
  Lihat di Glossary sebagai unitnya. Jika Anda mencoba transisi dari nilai ini ke nilai translate yang diungkapkan dengan persentase, Anda akan memiliki ketidakcococokan unit. Unit yang tidak memiliki konversi yang konsisten antara mereka, seperti piksel dan persentase, rentan untuk menyatukan ketidakcocokan.
• Animasi transisi pada bingkai dipicu ketika keadaan arus properti berbeda dari negara sebelumnya. Bingkai pertama dalam sceneAdegan berisi lingkungan dan menu permainan Anda. Pikirkan setiap file Adegan unik sebagai tingkat yang unik. Di setiap Adegan, Anda menempatkan lingkungan, hambatan, dan dekorasi, pada dasarnya merancang dan membangun permainan Anda dalam potongan-potongan. More info
  Lihat di Glossary tidak memiliki keadaan sebelumnya; oleh karena itu, Anda harus memulai animasi transisi setelah bingkai pertama.
• Untuk elemen visual dalam hirarki, transisi USS berperilaku sama seperti di CSS transition, jika Anda mengatur transisi untuk properti yang mewarisi, seperti color, transisi diterapkan pada elemen induk cascade ke elemen anak. Untuk mengetahui properti mana yang diwariskan, lihat Referensi properti ASS.
• Ketika transisi tidak lengkap terganggu, transisi USS berperilaku sama seperti di CSS transition, transisi terbalik mungkin lebih cepat.

Transisi termasuk sifat berikut:

Property	USS syntax	Description
Property	transition-property	Menentukan nama properti AS efek transisi adalah untuk. all.
Duration	transition-duration	Tentukan berapa lama efek transisi yang diperlukan untuk menyelesaikan. 0s.
Easing function	transition-timing-function	Menentukan bagaimana properti bergerak antara nilai dari waktu ke waktu. ease.
Delay	transition-delay	Tentukan ketika efek transisi dimulai. 0s.
Transition	transition	Shorthand untuk transition-property, transition-duration, transition-timing-function, dan transition-delay.

Anda dapat menggunakan kontrol di Pembuat UI, skrip API, atau C# untuk mengatur sifat transisi untuk elemen visual.

Kontrol transisi di Pembuat UI

Anda dapat menggunakan kontrol di bagian Transition Animations dari InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
See in Glossary di UI Builder untuk mengatur aturan transisi dari elemen visual. Anda dapat mengatur beberapa transisi pada elemen visual. Untuk menambahkan transisi lain, klik Add Transition. Untuk menghapusnya, klik tanda minus.

Property

Pengaturan kontrol Property yang properti transisi berlaku untuk. Untuk menggunakannya, pilih nama properti kata kunci atau USS dari dropdown. Dropdown memiliki bilah pencarian yang dapat Anda gunakan untuk menemukan kata kunci tertentu atau nama properti ASS.

Note: Jika Anda memilih Ignored, Unity mengabaikan transisi yang didefinisikan untuk durasi yang ditentukan, penundaan, dan fungsi easing.

Duration

Kontrol Duration menetapkan properti durasi. Untuk menggunakannya, masukkan nilai dalam kotak teks dan tentukan unit, atau pilih initial dalam pemilih unit.

Tip: Anda dapat memasukkan s atau ms setelah nilai atau masukkan initial. Ini secara otomatis mengubah unit yang ditampilkan dalam pemilih unit. Anda juga dapat menyeret untuk menentukan nilai dalam kotak teks.

Easing

Kontrol Easing menetapkan properti fungsi easing. Untuk menggunakannya, pilih nama fungsi easing dari dropdown.

Delay

Kontrol Delay menetapkan properti penundaan. Untuk menggunakannya, masukkan nilai dalam kotak teks dan tentukan unit, atau pilih initial dalam pemilih unit.

Tip: Anda dapat memasukkan s atau ms setelah nilai atau masukkan initial. Ini secara otomatis mengubah unit yang ditampilkan dalam pemilih unit. Anda juga dapat menyeret untuk menentukan nilai dalam kotak teks.

Properti transisi ASS

Anda dapat menggunakan aturan styling untuk mengatur sifat transisi untuk elemen visual. Anda dapat mengatur aturan styling dalam file ASS atau inline dalam file UXML.

transition-property

Anda dapat menyediakan properti USS tunggal, kata kunci, atau daftar yang dipisahkan dari mereka.

Tabel berikut daftar kata kunci yang didukung untuk transition-property:

Keyword	Description
all	Bandingkan transisi ke semua properti dan menimpa transisi yang telah disiapkan.
initial	Bandingkan transisi ke semua properti. Anda tidak dapat menggunakan kata kunci ini dalam daftar yang dipisahkan.
none	Ignores transisi untuk semua properti. Anda tidak dapat menggunakan kata kunci ini dalam daftar yang dipisahkan.

Anda dapat menerapkan transisi ke sebagian besar properti ASS. Namun, animatabilitas untuk sifat tertentu berbeda. Sifat-sifat USS jatuh ke dalam kategori berikut:

Animatability	Description
Fully animatable	Mendukung transisi dari nilai awal ke nilai akhir, pada kecepatan yang mengikuti fungsi pemasasan dan durasi transisi.
Discrete	Mendukung transisi antara nilai dalam satu langkah dari nilai awal ke nilai akhir.
Non-animatable	Tidak mendukung transisi.

Untuk mengetahui animatabilitas masing-masing properti, lihat Referensi properti ASS.

Note: Unity merekomendasikan Anda menggunakan transisi dengan USS mengubah properti. Meskipun Anda dapat menggunakan transisi pada properti ASS lain, itu mungkin mengakibatkan animasi dengan tingkat bingkai yang buruk karena perubahan nilai pada properti ini mungkin menyebabkan rekalkuasi tata letak. Rekalkuasi tata letak dalam setiap bingkai dapat memperlambat laju bingkai animasi transisi Anda.

Examples

transition-property: scale;
transition-property: translate, all, rotate;
transition-property: initial;
transition-property: none;

transition-duration

Anda dapat menyediakan nomor dengan unit, kata kunci, atau daftar nomor dan unit yang dipisahkan.

Jika Anda menyediakan beberapa nilai, setiap nilai berlaku untuk properti yang sesuai yang ditentukan dalam transition-property.

transition-duration hanya mendukung kata kunci initial (0s). Anda tidak dapat menggunakan kata kunci ini dalam daftar yang dipisahkan.

Examples

transition-duration: 2s;
transition-duration: 800ms;
transition-duration: 3s, 1500ms, 1.75s;
transition-duration: initial;

Dalam contoh berikut, durasi asli untuk skala adalah 1s, tetapi all menimpanya menjadi 2s.

transition-property: scale, all, rotate;
transition-duration: 1s, 2s, 3s;

transition-timing-function

Anda dapat menyediakan fungsi easing, kata kunci, atau daftar lengkap fungsi easing.

Jika Anda menyediakan beberapa nilai, setiap nilai berlaku untuk properti yang sesuai yang ditentukan dalam transition-property.

transition-timing-function hanya mendukung kata kunci initial. Ini sama dengan ease. Anda tidak dapat menggunakan kata kunci ini dalam daftar yang dipisahkan.

UI Toolkit mendukung fungsi easing berikut:

• ease
• ease-in
• ease-out
• ease-in-out
• linear
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-circ
• ease-out-circ
• ease-in-out-circ
• ease-in-elastic
• ease-out-elastic
• ease-in-out-elastic
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-bounce
• ease-out-bounce
• ease-in-out-bounce

Untuk informasi rinci tentang setiap fungsi, lihat Dokumentasi MDN untuk atribut CSS transition-timing-function CSS attribute atau easings.net.

Examples

transition-timing-function: linear;
transition-timing-function: ease-in, ease-out-circ, ease-in-out-cubic;
transition-timing-function: initial;

transition-delay

Anda dapat menyediakan nomor dengan unit, kata kunci, atau daftar nomor dan unit yang dipisahkan.

Jika Anda menyediakan beberapa nilai, setiap nilai berlaku untuk properti yang sesuai yang ditentukan dalam transition-property.

transition-delay hanya mendukung kata kunci initial (0s). Anda tidak dapat menggunakan kata kunci ini dalam daftar yang dipisahkan.

Examples

transition-delay: 0s;
transition-delay: 300ms;
transition-delay: 2s, 650ms, 2.75s;
transition-delay: initial;

transition

Anda dapat menyediakan satu transisi, kata kunci, atau daftar transisi yang dipisahkan. Anda memisahkan properti dalam transisi oleh ruang dengan urutan berikut:

1. transition-property
2. transition-delay
3. transition-duration
4. transition-timing-function

transition hanya mendukung kata kunci initial, yang mewakili nilai awal dari setiap properti transisi:

• transition-delay: 0s
• transition-duration: 0s
• transition-property: initial
• transition-timing-function: ease

Examples

/*One transition*/
transition: width 2s ease-out;

/*Two transitions*/
transition: margin-right 4s, color 1s;

C# properti

Anda dapat mengatur sifat transisi untuk elemen visual dalam skrip C #.

IStyle.transitionProperty

Properti IStyle.transitionProperty menetapkan sifat AS untuk transisi yang berlaku.

Properti transitionProperty adalah tipe StyleList<StylePropertyName>. StylePropertyName adalah struct yang dapat Anda construct dari string. StyleList adalah struct yang dapat Anda construct dari daftar StylePropertyNames.

Example

//Create a list that contains the rotate property, and use it to set transitionProperty.
List<StylePropertyName> properties = new List<StylePropertyName>();
properties.Add(new StylePropertyName("rotate"));
//Given a VisualElement named "element"...
element.style.transitionProperty = new StyleList<StylePropertyName>(properties);

Anda dapat menggunakan konversi implicit untuk menyederhanakan kode di atas sebagai berikut:

//Given a VisualElement named "element"...
element.style.transitionProperty = new List<StylePropertyName> { "rotate" };

IStyle.transitionDuration

Properti IStyle.transitionDuration menetapkan durasi transisi pada elemen visual.

Properti transitionDuration adalah tipe StyleList<TimeValue>. TimeValue adalah struct yang dapat Anda construct dari angka dan a TimeUnit enum. StyleList adalah struct yang dapat Anda construct dari daftar TimeValues.

Example

//Create a list that contains durations 2s and 500ms and use it to set transitionDuration.
List<TimeValue> durations = new List<TimeValue>();
durations.Add(new TimeValue(2f, TimeUnit.Second));
durations.Add(new TimeValue(500f, TimeUnit.Millisecond));
//Given a VisualElement named "element"...
element.style.transitionDuration = new StyleList<TimeValue>(durations);

Anda dapat menggunakan konversi implicit untuk menyederhanakan kode di atas sebagai berikut:

//Given a VisualElement named "element"...
element.style.transitionDuration = new List<TimeValue> { 2, new (500, TimeUnit.Millisecond) };

IStyle.transitionTimingFunction

Properti IStyle.transitionTimingFunction menetapkan fungsi easing untuk transisi pada elemen visual.

Properti transitionTimingFunction adalah tipe StyleList<EasingFunction>. EasingFunction adalah bangunan yang dapat Anda construct dari EasingMode enum.

Example

//Create a list that contains the Linear easing function, and use it to set transitionTimingFunction.
List<EasingFunction> easingFunctions = new List<EasingFunction>();
easingFunctions.Add(new EasingFunction(EasingMode.Linear));
//Given a VisualElement named "element"...
element.style.transitionTimingFunction = new StyleList<EasingFunction>(easingFunctions);

Anda dapat menggunakan konversi implicit untuk menyederhanakan kode di atas sebagai berikut:

//Given a VisualElement named "element"...
element.style.transitionTimingFunction = new List<EasingFunction> { EasingMode.Linear };

IStyle.transitionDelay

Properti IStyle.transitionDelay menetapkan penundaan untuk transisi pada elemen visual.

Properti transitionDelay adalah tipe StyleList<TimeValue>. TimeValue adalah struct yang dapat Anda construct dari angka dan a TimeUnit enum. StyleList adalah struct yang dapat Anda construct dari daftar TimeValues.

Example

//Create a list that contains delays 0.5s and 200ms, and use it to set transitionDelay.
List<TimeValue> delays = new List<TimeValue>();
delays.Add(new TimeValue(0.5f, TimeUnit.Second));
delays.Add(new TimeValue(200f, TimeUnit.Millisecond));
//Given a VisualElement named "element"...
element.style.transitionDuration = new StyleList<TimeValue>(delays);

Anda dapat menggunakan konversi implicit untuk menyederhanakan kode di atas sebagai berikut:

//Given a VisualElement named "element"...
element.style.transitionDelay = new List<TimeValue> { 0.5f, new(200, TimeUnit.Millisecond) };

More examples

Bagian ini mencakup contoh yang menerapkan transisi pada beberapa properti.

Example 1: Contoh ini berlaku transisi pada sifat scale dan transform-origin:

• Transisi pertama adalah properti scale. Memiliki durasi 4s, penundaan 0s, dan fungsi easing ease-in-sine.
• Transisi kedua adalah properti transform-origin. Memiliki durasi 3s, penundaan 600ms, dan fungsi easing ease-out-elastic.

.classA {
    transition-property: scale, transform-origin;
    transition-duration: 4s, 3s;
    transition-delay: 0s, 600ms;
    transition-timing-function: ease-in-sine, ease-out-elastic;
}

Example 2: Dalam contoh ini, transisi selanjutnya menimpa transisi sebelumnya, termasuk transisi dengan kata kunci all:

• Transisi pertama adalah pada semua properti. Ini berlaku durasi 500 mili detik, penundaan nol detik, dan fungsi easing linear.
• Transisi kedua adalah properti translate. Ini menimpa transisi dengan durasi 1s, penundaan 1s, dan fungsi easing ease-in. Semua sifat lain masih memiliki durasi 500ms, penundaan 0s, dan fungsi easing linear.

.classB {
    transition-property: all, translate;
    transition-duration: 500ms, 1s;
    transition-delay: 0s, 1s;
    transition-timing-function: linear, ease-in;
}

Example 3:

Contoh ini menunjukkan apa yang terjadi ketika daftar nilai properti adalah panjang yang berbeda. Jika daftar nilai properti lebih pendek daripada transition-property, Unity mengulang nilainya untuk membuat mereka cocok. Demikian pula, jika ada daftar nilai properti lebih lama yaitu untuk transition-property, Unity truncates itu.

.classC {
    transition-property: scale, rotate, translate;
    transition-duration: 1s, 2s;
    transition-delay: 1s, 2s, 3s, 4s, 5s, 6s, 7s;
}

Tabel berikut menunjukkan hasil akhir untuk contoh di atas:

Property	Duration	Delay	Easing function
scale	1s	1s	ease
rotate	2s	2s	ease
translate	1s	4s	ease

Important: transition-property, transition-duration, transition-delay, dan transition-timing-function adalah sifat USS yang terpisah. Jika Anda meninggalkan salah satu dari mereka yang tidak terdefinisi, mungkin bahwa mereka didefinisikan di tempat lain, seperti dalam aturan AS atau inline lain pada elemen UXML.

Sumber daya tambahan

• Menggunakan transisi CSS(Mozilla pengembang dokumentasi)
• CSS transition (Mozilla pengembang dokumentasi)
• CSS3 (Mozilla pengembang dokumentasi)
• Properti transisi CSS (Mozilla pengembang dokumentasi)
• Properti transisi CSS (Mozilla pengembang dokumentasi)
• Properti transisi CSS (Mozilla pengembang dokumentasi)