Material Design - Touch feedback , Reveal effect

来源:互联网 发布:重复歌曲删除软件 编辑:程序博客网 时间:2024/06/06 08:39

在 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;    }  
0 0
原创粉丝点击