您的位置:首页 > Web前端

Material Design - Touch feedback , Reveal effect

2015-10-28 09:32 429 查看
在 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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: