Giới thiệu Facebook Rebound

: Blogs; Blogs công nghệ

Như các bạn đã biết, hiện nay facebook đã và đang opensource khá nhiều thư viện họ dùng riêng cho Facebook , một ứng dụng mạng xã hội không xa lạ với bất kì ai sử dụng internet hiện nay. Có thể kể ra rất nhiều : React Native ( nền tảng phát triển application multiplatform), Fresco (thư viện xử lí ảnh riêng được dùng trong Facebook), redex, rebound …. Hôm nay mình xin phép được giới thiệu với các bạn thư viện nhỏ nhưng khá tiện dụng để xử lí Image animation là : Facebook Rebound.

Giới thiệu chung:

Rebound là một thư viện java nhằm tạo ra anition chuyển động của ảnh gần với thực tế nhất, gần giống như khi bạn tích họp 1 thư viện vật lí vào ứng dụng của mình vậy.
Rebound cực kì đơn giản nên việc tích hợp vào ứng dụng của bạn là rất dễ dàng đồng thời có thể sử dụng trong nhưng view, component phức tạp của android một cách đơn giản nhất : ví dụ pagers, toggles, scroller …
Rebound sử dụng hằng số config khá đơn giản tiện lợi cho việc custom cũng như đạt được animation như ý muốn một cách nhanh chóng.

Hướng dẫn sử dụng :

B1 : Trước hết bạn có thể tải thư viện file .jar hoặc suorce code tại địa chỉ : https://github.com/facebook/rebound/releases/tag/v0.3.8
B2 : Tạo 1 project android đơn giản , tạo thư mục /libs trong thư mục gốc của project và copy file rebound.jar vào đó.
B3 : Với view muốn sử dụng rebound animation , ban tạo 1 Spring model thực hiện quản lí animation cho view đó :

// Create a system to run the physics loop for a set of springs.
SpringSystem springSystem = SpringSystem.create();
// Add a spring to the system.
Spring spring = springSystem.createSpring();
// Add a listener to observe the motion of the spring.
spring.addListener(new SimpleSpringListener() {
  @Override
  public void onSpringUpdate(Spring spring) {
    // You can observe the updates in the spring
    // state by asking its current value in onSpringUpdate.
    float value = (float) spring.getCurrentValue();
    float scale = 1f - (value * 0.5f);
    myView.setScaleX(scale);
    myView.setScaleY(scale);
  }
});
// Set the spring in motion; moving from 0 to 1
spring.setEndValue(1);

// Create a system to run the physics loop for a set of springs.

SpringSystem springSystem = SpringSystem . create ( ) ;

// Add a spring to the system.

Spring spring = springSystem . createSpring ( ) ;

// Add a listener to observe the motion of the spring.

spring . addListener ( new SimpleSpringListener ( ) {

@ Override

public void onSpringUpdate ( Spring spring ) {

// You can observe the updates in the spring

// state by asking its current value in onSpringUpdate.

float value = ( float ) spring . getCurrentValue ( ) ;

float scale = 1f - ( value * 0.5f ) ;

myView . setScaleX ( scale ) ;

myView . setScaleY ( scale ) ;

}

} ) ;

// Set the spring in motion; moving from 0 to 1

spring . setEndValue ( 1 ) ;

B4 : Bạn có thể tùy chọn tham số cho hợp lí tại đây : http://facebook.github.io/rebound/

Demo sử dụng :

Trong bài viết này mình sử dụng Rebound cho các thành phần ImageView :

Mình khởi tạo 1 class extend từ ImageView :

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

import com.facebook.rebound.SimpleSpringListener;
import com.facebook.rebound.Spring;
import com.facebook.rebound.SpringConfig;
import com.facebook.rebound.SpringSystem;

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class ActionImageView extends ImageView {

    SimpleSpringListener mListener = new SimpleSpringListener() {

        @Override
        public void onSpringUpdate(Spring spring) {
            float scale = (float) spring.getCurrentValue();
            ActionImageView.this.setScaleX(scale);
            ActionImageView.this.setScaleY(scale);
        }
    };

    private SpringSystem mSpringSystem = SpringSystem.create();
    private Spring mSpring = mSpringSystem.createSpring();

    public ActionImageView(Context context) {
        this(context, null);
    }

    public ActionImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ActionImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mSpring.addListener(mListener);
    }

    @Override
    protected void onFinishInflate() {
        // TODO Auto-generated method stub
        super.onFinishInflate();
    }

    private void onZoomIn() {
        // TODO Auto-generated method stub
        mSpring.setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(50f,
                7f));
        mSpring.setCurrentValue(1f);
        mSpring.setEndValue(0.95f);
        mSpring.setVelocity(3);
    }

    private void onZoomOutNormal() {
        // TODO Auto-generated method stub
        mSpring.setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(50f,
                7f));
        mSpring.setCurrentValue(0.95f);
        mSpring.setEndValue(1f);
        mSpring.setVelocity(3);
    }

    private void onZoomOutWidthScale() {
        // TODO Auto-generated method stub
        mSpring.setSpringConfig(SpringConfig.fromOrigamiTensionAndFriction(40f,
                4f));
        mSpring.setCurrentValue(0.95f);
        mSpring.setEndValue(1f);
        mSpring.setVelocity(6);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        boolean result = super.onTouchEvent(event);

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            onZoomIn();
            break;
        case MotionEvent.ACTION_CANCEL:
        case MotionEvent.ACTION_UP:
            onZoomOutNormal();
            break;
        }
        return result;
    }
}

import android . annotation . TargetApi ;

import android . content . Context ;

import android . os . Build ;

import android . util . AttributeSet ;

import android . view . MotionEvent ;

import android . widget . ImageView ;

import com . facebook . rebound . SimpleSpringListener ;

import com . facebook . rebound . Spring ;

import com . facebook . rebound . SpringConfig ;

import com . facebook . rebound . SpringSystem ;

@ TargetApi ( Build . VERSION_CODES . HONEYCOMB )

public class ActionImageView extends ImageView {

SimpleSpringListener mListener = new SimpleSpringListener ( ) {

@ Override

public void onSpringUpdate ( Spring spring ) {

float scale = ( float ) spring . getCurrentValue ( ) ;

ActionImageView . this . setScaleX ( scale ) ;

ActionImageView . this . setScaleY ( scale ) ;

}

} ;

private SpringSystem mSpringSystem = SpringSystem . create ( ) ;

private Spring mSpring = mSpringSystem . createSpring ( ) ;

public ActionImageView ( Context context ) {

this ( context , null ) ;

}

public ActionImageView ( Context context , AttributeSet attrs ) {

this ( context , attrs , 0 ) ;

}

public ActionImageView ( Context context , AttributeSet attrs , int defStyle ) {

super ( context , attrs , defStyle ) ;

mSpring . addListener ( mListener ) ;

}

@ Override

protected void onFinishInflate ( ) {

// TODO Auto-generated method stub

super . onFinishInflate ( ) ;

}

private void onZoomIn ( ) {

// TODO Auto-generated method stub

mSpring . setSpringConfig ( SpringConfig . fromOrigamiTensionAndFriction ( 50f ,

7f ) ) ;

mSpring . setCurrentValue ( 1f ) ;

mSpring . setEndValue ( 0.95f ) ;

mSpring . setVelocity ( 3 ) ;

}

private void onZoomOutNormal ( ) {

// TODO Auto-generated method stub

mSpring . setSpringConfig ( SpringConfig . fromOrigamiTensionAndFriction ( 50f ,

7f ) ) ;

mSpring . setCurrentValue ( 0.95f ) ;

mSpring . setEndValue ( 1f ) ;

mSpring . setVelocity ( 3 ) ;

}

private void onZoomOutWidthScale ( ) {

// TODO Auto-generated method stub

mSpring . setSpringConfig ( SpringConfig . fromOrigamiTensionAndFriction ( 40f ,

4f ) ) ;

mSpring . setCurrentValue ( 0.95f ) ;

mSpring . setEndValue ( 1f ) ;

mSpring . setVelocity ( 6 ) ;

}

@ Override

public boolean onTouchEvent ( MotionEvent event ) {

boolean result = super . onTouchEvent ( event ) ;

switch ( event . getAction ( ) ) {

case MotionEvent . ACTION_DOWN :

onZoomIn ( ) ;

break ;

case MotionEvent . ACTION_CANCEL :

case MotionEvent . ACTION_UP :

onZoomOutNormal ( ) ;

break ;

}

return result ;

}

Trong file .xml mình sử dụng ActionImageView như 1 ImageView bình thường :

<packetname.ActionImageView
            android:id="@+id/btn_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/img_login"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="40dp"
            android:paddingLeft="3dp"
            android:singleLine="true"
            android:src="@drawable/btn_id" />

< packetname . ActionImageView

android : id = "@+id/btn_id"

android : layout_width = "wrap_content"

android : layout_height = "wrap_content"

android : layout_below = "@id/img_login"

android : layout_centerHorizontal = "true"

android : layout_marginTop = "40dp"

android : paddingLeft = "3dp"

android : singleLine = "true"

android : src = "@drawable/btn_id" / >

Việc sử dụng thư viện khá đơn giản, hiệu quả mang lại theo minh thấy rất ổn, performment cho action button cũng rất tốt . Bản thân mình thấy đây là thư viện nhỏ nhưng rất hữu ích cho ai muốn làm sản phẩm của mình có hiệu quả tốt hơn về UI,UX ..

Viblo

Có thể bạn quan tâm:

DVMS chuyên:

* Viết ứng dụng cho smartphone và máy tính bảng: iPhone, iPad , Android, Tablet, Windows Phone, Blackberry, Uber app, Grab app, mạng xã hội, vận tải thông minh, thực tế ảo, game mobile,...
* Viết ứng dụng tìm và đặt xe, các hệ thống theo mô hình kinh tế chia sẻ, uber for x, ứng dụng giúp việc,...
* Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
* Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup, ...

Quý khách xem Hồ sơ năng lực của DVMS tại đây >>

Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>