Koleksi animasi Android antara animasi


Pengenalan kepada bahagian ini:

Bahagian ini membawakan yang kedua daripada tiga animasi dalam Android - animasi tween (Tween), yang berbeza daripada animasi bingkai yang dipelajari sebelum ini , animasi bingkai Ia mensimulasikan kesan animasi dengan memainkan gambar secara berterusan, dan antara pembangun animasi hanya perlu menentukan permulaan animasi dan tamat animasi "bingkai kunci", "Bingkai perantaraan" perubahan animasi dikira dan dilengkapkan oleh sistem! Baiklah, mari kita mulakan bahagian ini~


1 Klasifikasi animasi tween dan Interpolator

Kesan animasi tween yang disokong oleh Andoird adalah seperti berikut, atau Mari kita bincangkan tentang empat jenis. . Yang kelima hanyalah gabungan yang sebelumnya~

  • AlphaAnimation: Kesan kecerunan ketelusan, anda boleh menentukan ketelusan permulaan dan penamat semasa membuat, dan juga Tempoh animasi Masa, julat ketelusan (0,1), 0 adalah telus sepenuhnya, 1 adalah legap sepenuhnya bersamaan dengan tag <alfa/>
  • SkalaAnimasi: Kesan kecerunan skala semasa membuat, anda perlu menentukan nisbah penskalaan permulaan dan penamat, serta titik rujukan penskalaan. Terdapat juga tempoh animasi yang sepadan dengan teg </>
  • TranslateAnimation: kesan kecerunan anjakan, nyatakan kedudukan permulaan dan penamat semasa membuat dan nyatakan tempoh animasi Hanya tetapkan masa sesuai dengan tag <terjemah/>
  • RotateAnimation: kesan kecerunan putaran, nyatakan sudut putaran permulaan dan penamat bagi animasi semasa mencipta dan animasi Tempoh dan paksi putaran; sepadan dengan <putarkan/> ;
  • set
  • /> tagSebelum kita mula menerangkan penggunaan pelbagai animasi, kita perlu menerangkan satu perkara dahulu:
  • Interpolator

digunakan untuk mengawal kelajuan perubahan animasi Ia boleh difahami sebagai pemapar animasi, kami juga boleh melaksanakan Interpolator sendiri. Antara muka, anda boleh mengawal kelajuan perubahan animasi sendiri, dan Android telah memberikan kami lima kelas pelaksanaan untuk dipilih:

  • LinearInterpolator: Animasi berubah pada kelajuan seragam
  • AccelerateInterpolator: Animasi berubah perlahan-lahan di mana ia bermula, kemudian mula memecut
  • AccelerateDecelerateInterpolator: Kelajuan berubah secara perlahan pada permulaan dan penghujung animasi, dan memecut di tengah
  • CycleInterpolator: Animasi bergelung untuk tertentu. bilangan kali, dan kelajuan perubahan adalah perubahan Lengkung sinusoidal: Math.sin(2 * mCycles * Math.PI * input)
  • DecelerateInterpolator: Berubah lebih pantas pada permulaan animasi, kemudian mula perlahan
  • AnticipateInterpolator: Songsang, mula-mula tukar bahagian dalam arah bertentangan dan kemudian cepatkan main balik
  • AnticipateOvershootInterpolator: Mulakan ke belakang dan kemudian lontar ke hadapan nilai tertentu dan kembali ke final nilai
  • BounceInterpolator: Nilai akan melonjak apabila ia mencapai nilai sasaran Contohnya, nilai sasaran ialah 100, dan nilai berikut mungkin 85, 77, 70. , 80, 90, 100
  • OvershottInterpolator: lantunan, akhirnya melebihi nilai sasaran dan kemudian perlahan-lahan menukar kepada nilai sasaran

Dan perkara ini, kita biasanya gunakannya semasa menulis fail xml animasi, atributnya ialah :android:interpolator, Nilai yang sepadan di atas ialah: @android:anim/linear_interpolator, yang sebenarnya ialah tatanama kes unta ditukar kepada garis bawah. AccelerateDecelerateInterpolator sepadan dengan: @android:anim/accelerate_decelerate_interpolator!


2 Penjelasan terperinci tentang pelbagai animasi

android:duration di sini ialah tempoh animasi, unit adalah milisaat~


1) AlphaAnimation (kecerunan ketelusan)

anim_alpha.xml:

<alpha xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    android:fromAlpha="1.0"  
    android:toAlpha="0.1"  
    android:duration="2000"/>

Penjelasan atribut:

dariAlpha: Memulakan ketelusan
kepadaAlpha: Menamatkan ketelusan
Julat ketelusan ialah: 0-1, telus sepenuhnya - legap sepenuhnya


2) SkalaAnimasi (kecerunan skala)

anim_scale.xml:

<scale xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_interpolator"  
    android:fromXScale="0.2"  
    android:toXScale="1.5"  
    android:fromYScale="0.2"  
    android:toYScale="1.5"  
    android:pivotX="50%"  
    android:pivotY="50%"  
    android:duration="2000"/>

Penjelasan atribut:

    <🎜
  • fromXScale/fromYScale: Nisbah permulaan skala sepanjang paksi-X/paksi-Y
  • toXScale/ toYScale: Perkadaran akhir penskalaan sepanjang Kedudukan tepi, seperti 50%, adalah berdasarkan imej Pusat ialah titik paksi pusat
  • 3) TranslateAnimation (kecerunan anjakan)

anim_translate.xml

:
<translate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    android:fromXDelta="0"  
    android:toXDelta="320"  
    android:fromYDelta="0"  
    android:toYDelta="0"  
    android:duration="2000"/>
Penjelasan sifat:

dariXDelta

/

dariYDelta
: X/Y koordinat kedudukan permulaan animasi
  • toXDelta/toYDelta: X/Y koordinat kedudukan tamat animasi
  • 4) RotateAnimation (kecerunan putaran )

anim_rotate.xml

:
<rotate xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
    android:fromDegrees="0"  
    android:toDegrees="360"  
    android:duration="1000"  
    android:repeatCount="1"  
    android:repeatMode="reverse"/>
Penjelasan atribut:

  • dari Darjah/ke Darjah: sudut permulaan/penghujung putaran
  • repeatCount: bilangan putaran, Nilai lalai ialah 0, yang mewakili satu masa Jika ia adalah nilai lain, seperti 3, ia berputar 4 kali. Selain itu, apabila nilainya ialah -1 atau tidak terhingga, ini bermakna animasi tidak akan berhenti
  • repeatMode: Tetapkan mod ulangan, lalainya ialah mulakan semula, tetapi hanya apabila repeatCount lebih besar daripada 0 atau tak terhingga atau -1 jam adalah berkesan. Anda juga boleh menetapkannya kepada terbalik, yang bermaksud apabila animasi dipaparkan genap masa, ia akan bergerak ke arah yang bertentangan!

5) AnimationSet (kecerunan gabungan)

Ia sangat mudah, ia hanya gabungan animasi sebelumnya~

anim_set.xml

  
  <set xmlns:android="http://schemas.android.com/apk/res/android"  
    android:interpolator="@android:anim/decelerate_interpolator"  
    android:shareInterpolator="true" >  
  
    <scale  
        android:duration="2000"  
        android:fromXScale="0.2"  
        android:fromYScale="0.2"  
        android:pivotX="50%"  
        android:pivotY="50%"  
        android:toXScale="1.5"  
        android:toYScale="1.5" />  
  
    <rotate  
        android:duration="1000"  
        android:fromDegrees="0"  
        android:repeatCount="1"  
        android:repeatMode="reverse"  
        android:toDegrees="360" />  
  
    <translate  
        android:duration="2000"  
        android:fromXDelta="0"  
        android:fromYDelta="0"  
        android:toXDelta="320"  
        android:toYDelta="0" />  
  
    <alpha  
        android:duration="2000"  
        android:fromAlpha="1.0"  
        android:toAlpha="0.1" />
</set>

3 Tulis contoh untuk mengalaminya

Baiklah, mari kita tulis contoh menggunakan animasi yang ditulis di atas animasi tween ialah: Mari kita mulakan dengan reka letak yang mudah: activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_alpha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="透明度渐变" />

    <Button
        android:id="@+id/btn_scale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="缩放渐变" />

    <Button
        android:id="@+id/btn_tran"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位移渐变" />

    <Button
        android:id="@+id/btn_rotate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="旋转渐变" />

    <Button
        android:id="@+id/btn_set"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="组合渐变" />

    <ImageView
        android:id="@+id/img_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="48dp"
        android:src="@mipmap/img_face" />
    </LinearLayout>

Baiklah, kemudian pergi ke MainActivity.java kami, yang juga sangat mudah, hanya hubungi AnimationUtils. loadAnimation() Muatkan animasi, dan kemudian kawalan Lihat kami memanggil startAnimation untuk memulakan animasi~

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Button btn_alpha;
    private Button btn_scale;
    private Button btn_tran;
    private Button btn_rotate;
    private Button btn_set;
    private ImageView img_show;
    private Animation animation = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();
    }

    private void bindViews() {
        btn_alpha = (Button) findViewById(R.id.btn_alpha);
        btn_scale = (Button) findViewById(R.id.btn_scale);
        btn_tran = (Button) findViewById(R.id.btn_tran);
        btn_rotate = (Button) findViewById(R.id.btn_rotate);
        btn_set = (Button) findViewById(R.id.btn_set);
        img_show = (ImageView) findViewById(R.id.img_show);

        btn_alpha.setOnClickListener(this);
        btn_scale.setOnClickListener(this);
        btn_tran.setOnClickListener(this);
        btn_rotate.setOnClickListener(this);
        btn_set.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_alpha:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_alpha);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_scale:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_scale);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_tran:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_translate);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_rotate:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_rotate);
                img_show.startAnimation(animation);
                break;
            case R.id.btn_set:
                animation = AnimationUtils.loadAnimation(this,
                        R.anim.anim_set);
                img_show.startAnimation(animation);
                break;
        }
    }
}

Jalankan pemaparan :

1.gif

Hei, agak-agak maksud saya, jangan cuba lagi, tukar sesuatu atau gabungkan animasi secara bebas untuk mencipta kesan hebat~


4 Pemantauan status animasi

Kami boleh memantau status pelaksanaan animasi, memanggil objek animasi:

  • setAnimationListener(new AnimationListener()) kaedah, dan tulis semula tiga kaedah berikut :
  • onAnimationStart(): Animasi bermula
  • onAnimtaionRepeat(): Animasi berulang
  • onAnimationEnd (): Selepas animasi

, anda boleh melengkapkan pemantauan status pelaksanaan animasi~


5 Tetapkan kesan animasi untuk Paparan

< secara dinamik 🎜> Panggilan pertama

AnimationUtils.loadAnimation (fail xml animasi), dan kemudian kawalan Lihat memanggil startAnimation(anim) Mulakan animasi ~ Ini ialah kaedah pemuatan statik Sudah tentu, anda juga boleh terus mencipta objek animasi, melengkapkan tetapan dengan kod Java, dan kemudian memanggil startAnimation menghidupkan animasi~


6 Tetapkan animasi peralihan untuk Fragment

Satu perkara yang perlu diperhatikan di sini ialah sama ada Fragment menggunakan pakej

v4 atau Serpihan di bawah pakej apl! Kami boleh memanggil setTransition(int transit) objek FragmentTransaction untuk menentukan animasi peralihan standard untuk Fragment Nilai pilihan untuk transit adalah seperti berikut:

  • TRANSIT_TIADA: Tiada animasi
  • TRANSIT_FRAGMENT_OPEN: Buka animasi borang
  • TRANSIT_FRAGMENT_CLOSE <🎜🎎: Tutup<🎜🎎: Kedua-dua animasi proses standard di atas boleh dipanggil, tetapi perbezaannya terletak pada animasi peralihan tersuai
  • Kaedah

    setCustomAnimations()!

    • Fragmen di bawah pakej apl: setCustomAnimations(int enter, int exit, int popEnter, int popExit) ditambah dan dialih keluar masing-masing. , tolak ke dalam tindanan, dan animasi apabila muncul keluar dari tindanan! Perkara lain yang perlu diperhatikan ialah jenis animasi yang sepadan ialah: animasi harta (Property), iaitu fail animasi Teg akar mestilah: <objectAnimator>, <valueAnimator> atau dua yang pertama dimasukkan ke dalam <set>;

    • Fragmen di bawah pakej v4: Pakej v4 menyokong dua jenis setCustomAnimations()

    2.png

    Perkara lain yang perlu diberi perhatian ialah jenis animasi yang sepadan ialah: Tween animation ), sama seperti Paparan di atas~

    Anda mungkin mempunyai keraguan tentang cara anda mengetahui jenis animasi yang sepadan sebenarnya, selagi anda pergi ke kod sumber Fragment dan mencari:

    Salah satu daripada onCreateAnimation. () kaedah Anda akan mengetahui nilai pulangan:

    pakej v4 :

    3.png

    pakej aplikasi : < . int enterAnim, int exitAnim)

    penggunaan adalah sangat mudah: 4.png tambah


    selepas startActivity(intent)

    atau

    finish()

    dan parameternya ialah: Aktiviti Baharu Animasi apabila memasuki , dan animasi apabila

    Aktiviti lama keluar

    Berikut ialah beberapa animasi cutscene yang agak mudah dan biasa digunakan untuk digunakan oleh semua orang~

    Muat turun portal: Aktiviti animasi peralihan biasa.zip

    8. Tulis butang pendaftaran log masuk selepas memasuki APP daripada Contoh kesan animasi pop timbul bawah: 5.png

    Menjalankan pemaparan :


    Pelaksanaan kod

    :

    Pertama ialah fail susun atur kami: activity_main.xml

    :

      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#DDE2E3"
        tools:context=".MainActivity">
    
        <LinearLayout
            android:id="@+id/start_ctrl"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="vertical"
            android:visibility="gone">
    
            <Button
                android:id="@+id/start_login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#F26968"
                android:gravity="center"
                android:paddingBottom="15dp"
                android:paddingTop="15dp"
                android:text="登陆"
                android:textColor="#FFFFFF"
                android:textSize="18sp" />
    
            <Button
                android:id="@+id/start_register"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#323339"
                android:gravity="center"
                android:paddingBottom="15dp"
                android:paddingTop="15dp"
                android:text="注册"
                android:textColor="#FFFFFF"
                android:textSize="18sp" />
        </LinearLayout></RelativeLayout>
    6.gif diikuti dengan

    MainActivity.java

    :

    public class MainActivity extends AppCompatActivity {
        private LinearLayout start_ctrl;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            start_ctrl = (LinearLayout) findViewById(R.id.start_ctrl);
            //设置动画,从自身位置的最下端向上滑动了自身的高度,持续时间为500ms
            final TranslateAnimation ctrlAnimation = new TranslateAnimation(
                    TranslateAnimation.RELATIVE_TO_SELF, 0, TranslateAnimation.RELATIVE_TO_SELF, 0,
                    TranslateAnimation.RELATIVE_TO_SELF, 1, TranslateAnimation.RELATIVE_TO_SELF, 0);
            ctrlAnimation.setDuration(500l);     //设置动画的过渡时间
            start_ctrl.postDelayed(new Runnable() {
                @Override
                public void run() {
                    start_ctrl.setVisibility(View.VISIBLE);
                    start_ctrl.startAnimation(ctrlAnimation);
                }
            }, 2000);
        }
    }

    Ulasannya sangat jelas, jadi saya tidak akan menerangkannya di sini Jika anda mempunyai sebarang keraguan tentang TranslateAnimation.RELATIVE_TO_SELF, Sila Google atau Baidu sendiri Disebabkan keterbatasan ruang (saya malas), saya tidak akan menulisnya di sini~7.gif


    9

    AnimationDemo3.zip

    AnimationDemo4.zip


    Ringkasan bahagian ini:

    Bahagian ini memberikan anda butiran Ia menerangkan jenis animasi kedua dalam Android (animasi kecerunan), penjelasan terperinci tentang empat jenis animasi dan Tetapkan pendengar animasi, dan cara menetapkan animasi untuk Paparan, Serpihan dan Aktiviti, dan akhirnya menulis entri pasca Contoh muncul butang log masuk dan butang pendaftaran dari bahagian bawah APP mungkin agak panjang, tetapi saya percaya ia sangat mudah Semua orang akan mendapat banyak selepas membaca ini~ Okay, itu sahaja untuk bahagian ini, terima kasih~