Tổng hợp các cách sử dụng animation trên một View

Thảo luận trong 'Android nâng cao' bắt đầu bởi thanhlongi90.it, 7/6/13.

  1. thanhlong90.it

    thanhlong90.it Admin Support

    Lượt xem: 2,892
    Tiếp tục một bài hướng dẫn nữa về animation, chủ đề này được Long nhắc đến khá nhiều trong các bài hướng dẫn vì thực tế nó là rất quan trọng và tầm quan trọng như thế nào thì khi các bạn làm ứng dụng cho dự án thực tế thì sẽ hiểu thôi. Trước mắt thì cứ xem cho biết cái đã cũng đc.
    training-prof
    1) Source code demo:
    Click vào đây để download source code demo.

    2) Animation cho view là gì?
    - View ở đây là một đối tượng hiển thị như Button, Imageview, Textview, EditText ... các đối tượng này hầu hết là kế thừa từ đối tượng View nên có các thuộc tính và function của View.
    - Animation cho view là làm cho nó phóng to thu nhỏ, di chuyển, làm mờ, thay đổi màu sắc, xoay một góc nhất định ...

    3) Các cách code Animation cho một đối tượng View:
    - Có 2 cách code một animation cho View:
    + Code trực tiếp trên class java.
    + Code qua các file xml dựng sẵn và gọi nó vào để sử dụng.
    - Và tất nhiên bài này hướng dẫn cả 2 cách
    1

    3) Hướng dẫn code:
    - res/values/strings.xml
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
     
        <string name="parsed_data">http://android.vn\nHướng dẫn bởi thanhlong90.it</string>
        <string name="app_name">DemoAndroid</string>
        <string name="action_settings">Settings</string>
        <string name="hello_world">Hello world!</string>
        <string name="alpha">Alpha</string>
        <string name="translate">Translate</string>
        <string name="rotate">Rotate</string>
        <string name="scale">Scale</string>
        <string name="set">Set</string>
        <string name="use_animation_resources">Sử dụng code từ nguồn</string>
     
    </resources>
    - activity_main.xml
    PHP:
    <LinearLayout 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:orientation="vertical" >
     
        <
    TextView
            android
    :layout_width="match_parent"
            
    android:layout_height="wrap_content"
            
    android:layout_marginTop="5dp"
            
    android:gravity="center"
            
    android:text="@string/parsed_data"
            
    android:textAppearance="?android:attr/textAppearanceMedium"
            
    android:textStyle="bold" />
     
        <
    Button
            android
    :id="@+id/alphaButton"
            
    android:layout_width="wrap_content"
            
    android:layout_height="wrap_content"
            
    android:text="@string/alpha" />
     
        <
    Button
            android
    :id="@+id/translateButton"
            
    android:layout_width="wrap_content"
            
    android:layout_height="wrap_content"
            
    android:text="@string/translate" />
     
        <
    Button
            android
    :id="@+id/rotateButton"
            
    android:layout_width="wrap_content"
            
    android:layout_height="wrap_content"
            
    android:text="@string/rotate" />
     
        <
    Button
            android
    :id="@+id/scaleButton"
            
    android:layout_width="wrap_content"
            
    android:layout_height="wrap_content"
            
    android:text="@string/scale" />
     
        <
    Button
            android
    :id="@+id/setButton"
            
    android:layout_width="wrap_content"
            
    android:layout_height="wrap_content"
            
    android:text="@string/set" />
     
        <
    CheckBox
            android
    :id="@+id/checkbox"
            
    android:layout_width="wrap_content"
            
    android:layout_height="wrap_content"
            
    android:text="@string/use_animation_resources" />
     
    </
    LinearLayout>
    - MainActivity.java
    PHP:
    package android.vn;
     
    import android.os.Bundle;
    import android.app.Activity;
    import android.view.View;
    import android.view.animation.AlphaAnimation;
    import android.view.animation.Animation;
    import android.view.animation.AnimationSet;
    import android.view.animation.AnimationUtils;
    import android.view.animation.RotateAnimation;
    import android.view.animation.ScaleAnimation;
    import android.view.animation.TranslateAnimation;
    import android.widget.Button;
    import android.widget.CheckBox;
     
    public class 
    MainActivity extends Activity {
     
        
    CheckBox mCheckBox;
     
        @
    Override
        
    public void onCreate(Bundle savedInstanceState) {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.activity_main);
       
            
    mCheckBox = (CheckBoxfindViewById(R.id.checkbox);
            final 
    Button alphaButton = (ButtonfindViewById(R.id.alphaButton);
            final 
    Button translateButton = (ButtonfindViewById(R.id.translateButton);
            final 
    Button rotateButton = (ButtonfindViewById(R.id.rotateButton);
            final 
    Button scaleButton = (ButtonfindViewById(R.id.scaleButton);
            final 
    Button setButton = (ButtonfindViewById(R.id.setButton);
     
            
    //Animation làm mờ đi 1 nút
            
    final AlphaAnimation alphaAnimation = new AlphaAnimation(10);
            
    //Thời gian làm mờ nút
            
    alphaAnimation.setDuration(3000);
     
            
    //Animation di chuyển 1 nút
            
    final TranslateAnimation translateAnimation =
                    new 
    TranslateAnimation(Animation.ABSOLUTE0,
                    
    Animation.RELATIVE_TO_PARENT1,
                    
    Animation.ABSOLUTE0Animation.ABSOLUTE100);
            
    //Tổng thời gian di chuyển
            
    translateAnimation.setDuration(3000);
     
            
    //Xoay nút một vòng tròn (360 độ)
            
    final RotateAnimation rotateAnimation = new RotateAnimation(0360,
                    
    Animation.RELATIVE_TO_SELF.5fAnimation.RELATIVE_TO_SELF.5f);
            
    //Tổng thời gian xoay nút
            
    rotateAnimation.setDuration(3000);
     
            
    //Thiết lập quy mô to nhỏ cho nút
            
    final ScaleAnimation scaleAnimation = new ScaleAnimation(1212);
            
    //Thiết lập thời gian thực hiện
            
    scaleAnimation.setDuration(3000);
     
            
    //Tổng hợp các animation ở trên
            
    final AnimationSet setAnimation = new AnimationSet(true);
            
    setAnimation.addAnimation(alphaAnimation);
            
    setAnimation.addAnimation(translateAnimation);
            
    setAnimation.addAnimation(rotateAnimation);
            
    setAnimation.addAnimation(scaleAnimation);
     
            
    setupAnimation(alphaButtonalphaAnimationR.anim.alpha_anim);
            
    setupAnimation(translateButtontranslateAnimationR.anim.translate_anim);
            
    setupAnimation(rotateButtonrotateAnimationR.anim.rotate_anim);
            
    setupAnimation(scaleButtonscaleAnimationR.anim.scale_anim);
            
    setupAnimation(setButtonsetAnimationR.anim.set_anim);
     
        }
     
        private 
    void setupAnimation(View view, final Animation animation,
                final 
    int animationID) {
            
    view.setOnClickListener(new View.OnClickListener() {
                public 
    void onClick(View v) {
                    
    // Nếu được chọn, thực hiện animation từ nguồn code ở trên
                    // Nếu không được chọn thì thực hiện animation từ xml (res/anim/)
                    
    v.startAnimation(mCheckBox.isChecked() ? AnimationUtils.loadAnimation(MainActivity.thisanimationID) : animation);
                }
            });
        }
    }
    - res/anim/alpha_anim.xml
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromAlpha="1.0" android:toAlpha="0.0"
            android:duration="500" />
    - res/anim/rotate_anim.xml
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
            android:toDegrees="360"
            android:pivotX="50%" android:pivotY="50%"
            android:duration="1000"/>
    - res/anim/scale_anim.xml
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromXScale="1"
            android:fromYScale="1"
            android:toXScale="2"
            android:toYScale="2"
            android:duration="1000"/>
    - res/anim/set_anim.xml
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <alpha android:fromAlpha="1.0" android:toAlpha="0.0"
              android:duration="1000" />
        <rotate android:toDegrees="180"
              android:duration="1000"/>
        <scale android:toXScale="2"
              android:toYScale="2"
              android:duration="1000"/>
        <translate android:fromXDelta="0" android:toXDelta="100%p"
              android:fromYDelta="0" android:toYDelta="100"
              android:duration="1000" />
    </set>
    - res/anim/translate_anim.xml
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromXDelta="0" android:toXDelta="100%p"
            android:fromYDelta="0" android:toYDelta="100"
            android:duration="1000" />
    4) Video clip kết quả demo:


    Bài viết đăng lên diễn đàn khác vui lòng ghi rõ nguồn: Android.vn
    Pass giải nén: http://android.vn
    Support: thanhlong90.it@gmail.com
    Chúc các bạn thành công!
    huong dan, hoc, lap trinh, android, thanhlong90.it, button, image, textview, view, animation
    lumia88, lettertran, Tiasangmoi924 others thích bài này.
  2. gamepr123

    gamepr123 New Member

    bài viết rất hữu ích. thanks bạn!
  3. HaiHack

    HaiHack Member

    bài này có mấy cái thẻ hơi phức tạp
  4. Nem

    Nem Moderator

    nó là basic mà, có gì phức tạp đâu chứ
  5. quynhcoi165

    quynhcoi165 New Member

    đúng cái mình đang tìm hiểu. thank long nhiều
  6. quynhcoi165

    quynhcoi165 New Member

    làm sao để textview di chuyển qua lại nhỉ
  7. Thien Phu

    Thien Phu Member

    Có cách nào cho nó không lặp lại không các bạn? Ví dụ như nếu nó mờ hẳn dần và mất luôn (không cho hiện lại). Bạn nào biết giúp dùm thanks
  8. lumia88

    lumia88 Quang Vũ

    cảm ơn Long nhiều nhiều

Chia sẻ trang này