Material Design - Touch feedback , Reveal effect

在 5.0 上 提供了很多动画效果方面的 优化 和 设置
在android5.0(api21)及以上,允许自定义这些动画:
1. Touch feedback 触摸反馈
2. Reveal effect 揭示效果
3. Activity transitions 活动过渡
4. Curved motion 曲线运动
5. View state changes 视图状态变化

1. Touch feedback 触摸反馈

设置属性

延伸到外的波纹
android:background=”@android:attr/selectableItemBackgroundBorderless”
android:background=”@android:attr/selectable”
有界限的波纹
android:background=”@android:attr/selectableItemBackground”

android:colorControlHighlight ,设置颜色

在代码中的示例:

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" 
        android:elevation="10dip"

        android:background="@android:attr/selectableItemBackground"
    android:colorControlHighlight="@android:color/holo_red_dark"/>

很多UI组件像 checkbox等都可以使用styles文件夹中的colorAccent 属性来设置符合你应用主题的颜色,而不必使用不同的图片和状态选择器。

<item name="android:colorAccent">#00FF00</item>

1.1 PS:RippleDrawable是一款Android视图波纹效果补丁,可将在Android L设备上的波纹效果视图移植到不是L的Android设备上使用。

用法:
// Create circular ripple effect to view
Button view = new Button(MainActivity.this);
RippleDrawable.createRipple(view, getColor(R.color.material_blue_600));

Github托管地址:https://github.com/03uk/RippleDrawable

圆形显示动画(揭露效果)

ViewAnimationUtils.createCircularReveal(
view,   // 操作的视图  
centerX, // 动画开始的中心点X 
centerY, // 动画开始的中心点Y  
startRadius, // 动画开始半径
endRadius) // 动画结束半径  

示例代码(中间显示):

private void hideImageCircular() {
    int x = getX();
    int y = getY();
    int radius = getRadius();

    ValueAnimator anim =
            ViewAnimationUtils.createCircularReveal(mImageView, x, y, radius, 0);

    anim.addListener(new AnimatorListenerAdapter() {

        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            mImageView.setVisibility( View.INVISIBLE );
        }
    });

    anim.start();
}

private void revealImageCircular() {
    int x = getX();
    int y = getY();
    int radius = getRadius();

    ValueAnimator anim =
            ViewAnimationUtils.createCircularReveal(mImageView, x, y, 0, radius);

    anim.setDuration( 1000 );
    anim.addListener( new AnimatorListenerAdapter() {
        @Override
        public void onAnimationStart(Animator animation) {
            super.onAnimationStart(animation);
            mImageView.setVisibility( View.VISIBLE );
        }
    });

    anim.start();
}

示例代码(左上角扇形开始显示):

public Animator createAnimation(View v, Boolean isFirst) {  

      Animator animator;  

      if (isFirst) {  
          animator = ViewAnimationUtils.createCircularReveal(  
                  v,// 操作的视图 
                  0,// 动画开始的中心点X 
                  0,// 动画开始的中心点Y 
                  v.getWidth(),// 动画开始半径 
                  0);// 动画结束半径 
      } else {  
          animator = ViewAnimationUtils.createCircularReveal(  
                  v,// 操作的视图 
                  0,// 动画开始的中心点X 
                  0,// 动画开始的中心点Y 
                  0,// 动画开始半径 
                  v.getWidth());// 动画结束半径 
      }  

      animator.setInterpolator(new DecelerateInterpolator());  
      animator.setDuration(500);  
      return animator;  
  }  
  static boolean isFirst = false;  
  @Override  
  public void onClick(View v) {  
      createAnimation(myView, isFirst).start();  
      isFirst = !isFirst;  
  }  

你可能感兴趣的:(Material Design - Touch feedback , Reveal effect)