page.title=Mendefinisikan Animasi Custom
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Pelajaran ini mengajarkan Anda cara</h2>
<ol>
<li><a href="#Touch">Menyesuaikan Umpan Balik Sentuh</a></li>
<li><a href="#Reveal">Menggunakan Reveal Effect</a></li>
<li><a href="#Transitions">Menyesuaikan Transisi Aktivitas</a></li>
<li><a href="#ViewState">Menganimasikan Perubahan Status Tampilan</a></li>
<li><a href="#AnimVector">Menganimasikan Drawable Vektor</a></li>
</ol>
<h2>Anda juga harus membaca</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li>
<li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li>
</ul>
</div>
</div>
<p>Animasi dalam desain bahan memberi pengguna umpan balik tentang tindakannya dan menyediakan
kesinambungan visual saat pengguna berinteraksi dengan aplikasi Anda. Tema bahan menyediakan beberapa animasi default
untuk tombol dan transisi aktivitas, dan Android 5.0 (API level 21) ke atas memungkinkan Anda menyesuaikan
animasi ini dan membuat yang baru:</p>
<ul>
<li>Umpan balik sentuh</li>
<li>Singkap Melingkar</li>
<li>Transisi aktivitas</li>
<li>Gerakan melengkung</li>
<li>Perubahan status tampilan</li>
</ul>
<h2 id="Touch">Menyesuaikan Umpan Balik Sentuh</h2>
<p>Umpan balik sentuh dalam desain bahan menyediakan konfirmasi visual seketika pada
titik kontak bila pengguna berinteraksi dengan elemen UI. Animasi umpan balik sentuh default
untuk tombol menggunakan kelas {@link android.graphics.drawable.RippleDrawable} baru, yang bertransisi
di antara berbagai status dengan efek riak.</p>
<p>Di sebagian besar kasus, Anda harus menerapkan fungsionalitas ini dalam XML tampilan dengan menetapkan
latar belakang tampilan sebagai:</p>
<ul>
<li><code>?android:attr/selectableItemBackground</code> untuk riak berbatas.</li>
<li><code>?android:attr/selectableItemBackgroundBorderless</code> untuk riak yang meluas ke luar
tampilan. Latar belakang ini akan digambar di atas, dan dibatasi oleh, induk tampilan terdekat dengan
latar belakang non-null.</li>
</ul>
<p class="note"><strong>Catatan:</strong> <code>selectableItemBackgroundBorderless</code> adalah
atribut baru yang diperkenalkan di API level 21.</p>
<p>Atau, Anda bisa mendefinisikan {@link android.graphics.drawable.RippleDrawable}
sebagai sumber daya XML dengan menggunakan elemen <code>ripple</code>.</p>
<p>Anda bisa menetapkan warna ke objek-objek {@link android.graphics.drawable.RippleDrawable}. Untuk mengubah
warna default umpan balik sentuh, gunakan atribut <code>android:colorControlHighlight</code>
tema.</p>
<p>Untuk informasi selengkapnya, lihat referensi API bagi kelas {@link
android.graphics.drawable.RippleDrawable}.</p>
<h2 id="Reveal">Menggunakan Reveal Effect</h2>
<p>Animasi singkap memberi pengguna kesinambungan visual saat menampilkan atau menyembunyikan sekelompok
elemen UI. Metode {@link android.view.ViewAnimationUtils#createCircularReveal
ViewAnimationUtils.createCircularReveal()} memungkinkan Anda menganimasikan lingkaran terpangkas
untuk memperlihatkan atau menyembunyikan tampilan.</p>
<p>Untuk memperlihatkan tampilan yang sebelumnya tidak terlihat dengan menggunakan efek ini:</p>
<pre>
// previously invisible view
View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());
// create the animator for this view (the start radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();
</pre>
<p>Untuk menyembunyikan sebuah tampilan yang sebelumnya terlihat dengan menggunakan efek ini:</p>
<pre>
// previously visible view
final View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();
// create the animation (the final radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
myView.setVisibility(View.INVISIBLE);
}
});
// start the animation
anim.start();
</pre>
<h2 id="Transitions">Menyesuaikan Transisi Aktivitas</h2>
<!-- shared transition video -->
<div style="width:290px;margin-left:35px;float:right">
<div class="framed-nexus5-port-span-5">
<video class="play-on-hover" autoplay="">
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4">
<source src="{@docRoot}design/material/videos/ContactsAnim.webm">
<source src="{@docRoot}design/material/videos/ContactsAnim.ogv">
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Gambar 1</strong> - Transisi
dengan elemen bersama.</p>
<em>Untuk memutar ulang film, klik layar perangkat</em>
</div>
</div>
<p>Transisi aktivitas dalam aplikasi desain bahan memberikan koneksi visual antar berbagai status
melalui gerakan dan transformasi di antara elemen umum. Anda bisa menetapkan animasi custom untuk
masuk ke dan keluar dari transisi dan untuk transisi elemen bersama di antara aktivitas.</p>
<ul>
<li>Transisi <strong>masuk</strong> menentukan cara tampilan di aktivitas memasuki suatu babak.
misalnya, dalam transisi masuk <em>explode</em>, tampilan memasuki babak dari sisi luar
dan melayang masuk ke arah tengah layar.</li>
<li>Transisi <strong>keluar</strong> menentukan cara tampilan di aktivitas keluar dari suatu babak. Misalnya
, dalam transisi keluar <em>explode</em>, tampilan akan keluar dari babak dari bagian
tengahnya.</li>
<li>Transisi <strong>elemen bersama</strong> menentukan cara menggunakan bersama suatu tampilan
oleh dua transisi aktivitas di antara aktivitas-aktivitas ini. Misalnya, jika dua aktivitas memiliki
gambar yang sama dengan posisi dan ukuran berbeda, transisi elemen bersama <em>changeImageTransform</em>
mentransformasikan dan menskalakan gambar secara mulus di antara aktivitas-aktivitas ini.</li>
</ul>
<p>Android 5.0 (API level 21) mendukung transisi masuk dan transisi keluar ini:</p>
<ul>
<li><em>explode</em> - Memindahkan tampilan masuk ke atau keluar dari tengah babak.</li>
<li><em>slide</em> - Memindahkan tampilan masuk ke atau keluar dari salah satu tepi babak.</li>
<li><em>fade</em> - Menambahkan atau menghapus tampilan dari babak dengan mengubah opasitasnya.</li>
</ul>
<p>Transisi apa pun yang memperluas kelas {@link android.transition.Visibility} didukung
sebagai transisi masuk atau transisi keluar. Untuk informasi selengkapnya, lihat referensi API untuk kelas
{@link android.transition.Transition}.</p>
<p>Android 5.0 (API level 21) juga mendukung transisi elemen bersama ini:</p>
<ul>
<li><em>changeBounds</em> - Menganimasikan perubahan pada batas-batas layout tampilan target.</li>
<li><em>changeClipBounds</em> - Menganimasikan perubahan pada batas-batas pemangkasan tampilan target.</li>
<li><em>changeTransform</em> - Menganimasikan perubahan pada skala dan rotasi tampilan target.</li>
<li><em>changeImageTransform</em> - Menganimasikan perubahan pada ukuran dan skala gambar target.</li>
</ul>
<p>Bila Anda mengaktifkan transisi aktivitas dalam aplikasi, transisi memudar-silang default akan
diaktifkan di antara aktivitas masuk dan aktivitas keluar.</p>
<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
<p class="img-caption">
<strong>Gambar 2</strong> - Transisi babak dengan satu elemen bersama.
</p>
<h3>Menetapkan transisi custom</h3>
<p>Pertama, aktifkan transisi konten jendela dengan atribut <code>android:windowContentTransitions</code>
bila Anda mendefinisikan gaya yang mewarisi tema bahan. Anda juga bisa menetapkan
transisi-transisi masuk, keluar, dan elemen bersama dalam definisi gaya:</p>
<pre>
<style name="BaseAppTheme" parent="android:Theme.Material">
<!-- enable window content transitions -->
<item name="android:windowContentTransitions">true</item>
<!-- specify enter and exit transitions -->
<item name="android:windowEnterTransition">@transition/explode</item>
<item name="android:windowExitTransition">@transition/explode</item>
<!-- specify shared element transitions -->
<item name="android:windowSharedElementEnterTransition">
@transition/change_image_transform</item>
<item name="android:windowSharedElementExitTransition">
@transition/change_image_transform</item>
</style>
</pre>
<p>Transisi <code>change_image_transform</code> dalam contoh ini didefinisikan sebagai berikut:</p>
<pre>
<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<changeImageTransform/>
</transitionSet>
</pre>
<p>Elemen <code>changeImageTransform</code> menunjukkan
kelas {@link android.transition.ChangeImageTransform}. Untuk informasi selengkapnya, lihat referensi
API untuk {@link android.transition.Transition}.</p>
<p>Sebaliknya, untuk mengaktifkan transisi konten jendela dalam kode Anda, panggil
metode {@link android.view.Window#requestFeature Window.requestFeature()}:</p>
<pre>
// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// set an exit transition
getWindow().setExitTransition(new Explode());
</pre>
<p>Untuk menetapkan transisi dalam kode Anda, panggil metode-metode ini dengan objek {@link
android.transition.Transition}:</p>
<ul>
<li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
<li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition
Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition
Window.setSharedElementExitTransition()}</li>
</ul>
<p>Metode {@link android.view.Window#setExitTransition setExitTransition()} dan {@link
android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} mendefinisikan
transisi keluar untuk aktivitas yang memanggil. Metode {@link android.view.Window#setEnterTransition
setEnterTransition()} dan {@link android.view.Window#setSharedElementEnterTransition
setSharedElementEnterTransition()} mendefinisikan transisi masuk untuk aktivitas yang dipanggil.</p>
<p>Untuk mendapatkan efek penuh sebuah transisi, Anda harus mengaktifkan transisi konten jendela pada
aktivitas yang memanggil maupun aktivitas yang dipanggil. Jika tidak, aktivitas yang memanggil akan memulai transisi keluar,
namun kemudian Anda akan melihat transisi jendela (seperti mengelupas atau memudar).</p>
<p>Untuk memulai transisi masuk sesegera mungkin, gunakan metode
{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}
pada aktivitas yang dipanggil. Ini memungkinkan Anda mendapatkan transisi masuk yang lebih dramatis.</p>
<h3>Memulai aktivitas dengan menggunakan transisi</h3>
<p>Jika Anda mengaktifkan transisi dan mengatur transisi keluar untuk aktivitas, transisi itu akan diaktifkan
bila Anda menjalankan aktivitas lain sebagai berikut:</p>
<pre>
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
</pre>
<p>Jika Anda telah mengatur transisi masuk untuk aktivitas kedua, transisi juga akan diaktifkan
bila aktivitas dimulai. Untuk menonaktifkan transisi bila Anda memulai aktivitas lain, sediakan
bundel opsi <code>null</code>.</p>
<h3>Memulai aktivitas dengan satu elemen bersama</h3>
<p>Untuk membuat animasi transisi layar di antara dua aktivitas yang memiliki satu elemen bersama:</p>
<ol>
<li>Aktifkan transisi konten jendela dalam tema Anda.</li>
<li>Tetapkan transisi elemen bersama dalam gaya Anda.</li>
<li>Definisikan transisi Anda sebagai sumber daya XML.</li>
<li>Tetapkan nama umum pada elemen bersama dalam kedua layout dengan
atribut <code>android:transitionName</code>.</li>
<li>Gunakan metode {@link android.app.ActivityOptions#makeSceneTransitionAnimation
ActivityOptions.makeSceneTransitionAnimation()}.</li>
</ol>
<pre>
// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);
// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);
// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(this, Activity2.class);
// create the transition animation - the images in the layouts
// of both activities are defined with android:transitionName="robot"
ActivityOptions options = ActivityOptions
.makeSceneTransitionAnimation(this, androidRobotView, "robot");
// start the new activity
startActivity(intent, options.toBundle());
}
});
</pre>
<p>Untuk tampilan dinamis bersama yang Anda hasilkan dalam kode, gunakan
metode {@link android.view.View#setTransitionName View.setTransitionName()} untuk menetapkan
nama elemen umum di kedua aktivitas.</p>
<p>Untuk membalik animasi transisi babak bila Anda menyelesaikan aktivitas kedua, panggil metode
{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}
sebagai ganti {@link android.app.Activity#finish Activity.finish()}.</p>
<h3>Memulai aktivitas dengan beberapa elemen bersama</h3>
<p>Untuk membuat animasi transisi babak antara dua aktivitas yang memiliki lebih dari satu
elemen bersama, definisikan elemen bersama di kedua layout dengan atribut <code>android:transitionName</code>
(atau gunakan metode {@link android.view.View#setTransitionName View.setTransitionName()}
di kedua aktivitas), dan buat sebuah objek {@link android.app.ActivityOptions} sebagai berikut:</p>
<pre>
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
Pair.create(view1, "agreedName1"),
Pair.create(view2, "agreedName2"));
</pre>
<h2 id="CurvedMotion">Menggunakan Gerakan Melengkung</h2>
<p>Animasi dalam desain bahan mengandalkan kurva untuk pola interpolasi waktu dan
gerakan spasial. Dengan Android 5.0 (API level 21) ke atas, Anda bisa mendefinisikan kurva pewaktuan custom dan
pola gerakan melengkung untuk animasi.</p>
<p>Kelas {@link android.view.animation.PathInterpolator} adalah interpolator baru berdasarkan sebuah
kurva Bézier atau objek {@link android.graphics.Path}. Interpolator ini menetapkan kurva gerakan
dalam bujur sangkar 1x1, dengan titik-titik jangkar di (0,0) dan (1,1) dan titik-titik kontrol sebagaimana ditetapkan menggunakan
argumen konstruktor. Anda juga bisa mendefinisikan interpolator path sebagai sumber daya XML:</p>
<pre>
<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1"/>
</pre>
<p>Sistem menyediakan sumber daya XML untuk tiga kurva dasar dalam
spesifikasi desain bahan:</p>
<ul>
<li><code>@interpolator/fast_out_linear_in.xml</code></li>
<li><code>@interpolator/fast_out_slow_in.xml</code></li>
<li><code>@interpolator/linear_out_slow_in.xml</code></li>
</ul>
<p>Anda bisa meneruskan objek {@link android.view.animation.PathInterpolator} ke metode {@link
android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>
<p>Kelas {@link android.animation.ObjectAnimator} memiliki konstruktor-konstruktor baru yang memungkinkan Anda menganimasikan
koordinat bersama sebuah path dengan menggunakan dua atau beberapa properti sekaligus. Misalnya, animator berikut
menggunakan objek {@link android.graphics.Path} untuk menganimasikan properti X dan Y sebuah tampilan:</p>
<pre>
ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();
</pre>
<h2 id="ViewState">Menganimasikan Perubahan Status Tampilan</h2>
<p>Kelas {@link android.animation.StateListAnimator} memungkinkan Anda mendefinisikan animator yang berjalan bila
status tampilan berubah. Contoh berikut menampilkan cara mendefinisikan {@link
android.animation.StateListAnimator} sebagai sumber daya XML:</p>
<pre>
<!-- animate the translationZ property of a view when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="2dp"
android:valueType="floatType"/>
<!-- you could have other objectAnimator elements
here for "x" and "y", or other properties -->
</set>
</item>
<item android:state_enabled="true"
android:state_pressed="false"
android:state_focused="true">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="100"
android:valueTo="0"
android:valueType="floatType"/>
</set>
</item>
</selector>
</pre>
<p>Untuk menyertakan animasi status tampilan custom ke tampilan, definisikan animator menggunakan
elemen <code>selector</code> dalam sumber daya file XML sebagaimana dalam contoh ini, dan tetapkan ke
tampilan Anda dengan atribut <code>android:stateListAnimator</code>. Untuk menetapkan animator daftar status
ke sebuah tampilan dalam kode Anda, gunakan metode {@link android.animation.AnimatorInflater#loadStateListAnimator
AnimationInflater.loadStateListAnimator()}, dan tetapkan animator ke tampilan dengan
metode {@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>
<p>Bila tema Anda memperluas tema bahan, tombol-tombol akan memiliki animasi Z secara default. Untuk menghindari
perilaku ini di tombol Anda, aturlah atribut <code>android:stateListAnimator</code> ke
<code>@null</code>.</p>
<p>Kelas {@link android.graphics.drawable.AnimatedStateListDrawable} memungkinkan Anda membuat drawable
yang menampilkan animasi di antara perubahan status tampilan terkait. Sebagian widget sistem di
Android 5.0 menggunakan animasi ini secara default. Contoh berikut menampilkan cara
mendefinisikan {@link android.graphics.drawable.AnimatedStateListDrawable} sebagai sumber daya XML:</p>
<pre>
<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- provide a different drawable for each state-->
<item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
android:state_pressed="true"/>
<item android:id="@+id/focused" android:drawable="@drawable/drawableF"
android:state_focused="true"/>
<item android:id="@id/default"
android:drawable="@drawable/drawableD"/>
<!-- specify a transition -->
<transition android:fromId="@+id/default" android:toId="@+id/pressed">
<animation-list>
<item android:duration="15" android:drawable="@drawable/dt1"/>
<item android:duration="15" android:drawable="@drawable/dt2"/>
...
</animation-list>
</transition>
...
</animated-selector>
</pre>
<h2 id="AnimVector">Menganimasikan Drawable Vektor</h2>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Drawable Vektor </a>
bisa diubah skalanya tanpa kehilangan definisi. Kelas {@link android.graphics.drawable.AnimatedVectorDrawable}
memungkinkan Anda menganimasikan properti drawable vektor.</p>
<p>Anda biasanya mendefinisikan drawable vektor yang dianimasikan dalam tiga file XML:</p>
<ul>
<li>Drawable vektor dengan elemen <code><vector></code> dalam
<code>res/drawable/</code></li>
<li>Drawable vektor animasi dengan elemen <code><animated-vector></code> dalam
<code>res/drawable/</code></li>
<li>Satu atau beberapa animator objek dengan elemen <code><objectAnimator></code> dalam
<code>res/anim/</code></li>
</ul>
<p>Drawable vektor yang dianimasikan bisa menganimasikan atribut elemen <code><group></code> dan
<code><path></code>. Elemen <code><group></code> mendefinisikan satu set
path atau subgrup, dan elemen <code><path></code> mendefinisikan path yang harus digambar.</p>
<p>Bila Anda mendefinisikan drawable vektor yang ingin dianimasikan, gunakan atribut <code>android:name</code>
untuk menetapkan nama unik ke grup dan path, sehingga Anda bisa merujuknya dari
definisi animator Anda. Misalnya:</p>
<pre>
<!-- res/drawable/vectordrawable.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600">
<group
<strong>android:name="rotationGroup"</strong>
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" >
<path
<strong>android:name="v"</strong>
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
</group>
</vector>
</pre>
<p>Definisi drawable vektor yang dianimasikan merujuk pada grup dan path dalam drawable vektor
berdasarkan namanya:</p>
<pre>
<!-- res/drawable/animvectordrawable.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vectordrawable" >
<target
android:name="rotationGroup"
android:animation="@anim/rotation" />
<target
android:name="v"
android:animation="@anim/path_morph" />
</animated-vector>
</pre>
<p>Definisi animasi menyatakan objek {@link android.animation.ObjectAnimator} atau {@link
android.animation.AnimatorSet}. Animator pertama dalam contoh ini memutar
grup target sebanyak 360 derajat:</p>
<pre>
<!-- res/anim/rotation.xml -->
<objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
</pre>
<p>Animator kedua dalam contoh ini perlahan-lahan mengubah bentuk path drawable vektor dari satu bentuk ke
bentuk yang lain. Kedua path harus kompatibel untuk morphing: keduanya harus memiliki jumlah perintah yang sama
dan jumlah parameter yang sama untuk setiap perintah.</p>
<pre>
<!-- res/anim/path_morph.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
android:valueType="pathType" />
</set>
</pre>
<p>Untuk informasi selengkapnya, lihat referensi API bagi {@link
android.graphics.drawable.AnimatedVectorDrawable}.</p>