Giới thiệu Facebook Rebound

Bài đăng này đã không được cập nhật trong 8 năm

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);

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;
	}
}

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" />

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 ..

Tài liệu tham khảo :

Android

Mục lục