Material Design效果实践记录

动画效果Touch feedback:
触摸反馈提供了用计划与UI交互时的可视化的确认接触点
Ripple效果
Ripple效果,即点击后的波纹效果。Material Design很多都使用了这个效果。
RippleDrawable的涟漪效果在两种不同的状态下过度:
RippleDrawable(ColorStateList color,Drawable content,Drable mask)
最简单的的Ripple效果有两种,即在需要产生Ripole的控件下面加入:
android:background=”?android:attr/selectableItemBackground”//这是波纹有界限,也就是说不会超出button控件的大小
android:background=”?android:attr/selectableItemBackgroundBorderless”//这是波纹无界限,也就是说会超出button控件的大小,以文字为中的涟漪出一个圆。
上述两个方法是Google出的,所以,可以直接使用,这两个的涟漪效果是灰色的。在使用时注意:控件一般使用button会直接出效果,但是如果是TextView或者Linearlayout这些时需要加入android:clickable=”true”,这样就可以了。
还可以自定义一个Ripple效果:
最简单的效果:
在drawable文件夹下新建一个xml文件:
在drawable文件夹下右击New —》Drable resource file,在新建的框下面选择

在圈出来的地方将内容改为ripple,然后点击OK
新建完成之后会报错,是因为你建好的文件没有设置Riiple颜色,所以会报错,你需要做以下操作:

<item>
  <shape android:shape="oval">//  这里设置需要Ripple的形状
            <solid android:color="?android:colorAccent"/>//设置Ripple的特殊效果,重点颜色等
        </shape>
</item>

如果你想ripple出来的是一张图片,那你只需要加入一个

<item name="android:colorControlHighlight">@color/white</item>//修改默认的涟漪效果,主要是button等效果上的
<item name="android:colorAccent">@color/black</item>
//修改CheckBox的涟漪效果颜色
<item name="android:colorControlActivated">@color/red</item>
//如果不行的话使用这一个也可以修改CheckBox的涟漪效果颜色
<item name="android:colorPrimary">@color/yellow</item>

Circular Reveal动画效果
是动画出现或者消失的效果,实现的方式就是在OnClickListener的方法体里面实现下面的方法:
ViewAnimationUtils.createCircularReveal(View view,int centerX,int centerY,float startRadius,float endRadius)

这几个参数分别是:
View view:是指定那个控件的变换效果
int centerX:是指圆心的X轴,
int centerY:是指圆心的Y轴
float startRadius:是开始的半径
float endRadius:是结束的半径
然后你可以获得一个Animator对象,Start就可以了。
如果你想有更多的效果,你可以对animator做更多设置,你还可以在animator.addListener的方法,让控件显示或者消失。
Activity transitions Activity的跳转动画
Activity的过度动画:进入,退出,共享元素下的进,出。过度动画是4.4引进的。
具体实现方式:
进出支持的Transition效果:Explode Slide和Fade
共享元素的Transition效果:changeBunds changeClipBounds changeTransform changeImageTransform

过度动画的使用有两种方式实现出来:
第一种:在风格文件方式中实现:即在Style中实现:
首先你要在主要的style下加入

<!-- 允许使用动画效果-->
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
然后自定义一个style,设置动画效果来实现,以下是系统默认的的动画效果
<!--进入的动画-->
<item name="android:windowEnterTransition">@android:transition/explode</item>
<!--退出的动画-->
<item name="android:windowExitTransition">@android:transition/explode</item>

<!--共享元素的进入-->
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<!--共享元素的退出-->
<item name="android:windowSharedElementExitTransition">@android:transition/move</item>

如果你需要自定义一个动画效果,那么你需要在res下,新建一个文件夹起名:transition
你在新建动画的xml文件时就可以看出来了:

新建一个transitionSet,设置一些基本内容,比如:
//可以设置动画时间,还可以设置插值器等内容

第二种:在Java代码中实现:
需要设置几部分,这些设置的代码必须要放在Super的上面,注意,这是需要注意的:

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);//类似于在Style中设置允许动画效果
getWindow().setEnterTransition(new Explode().setInterpolator(new BounceInterpolator()).setDuration(1000));//普通的动画效果,setInterpolator,设置Intent进入的动画效果
getWindow().setReenterTransition();//重新加载时的动画效果
getWindow().setSharedElementEnterTransition(new ChangeTransform().setInterpolator(new BounceInterpolator()).setDuration(1000))
;//设置共享动画的效果
super.onCreate(savedInstanceState);
startActivity(new Intent(getApplicationContext(), MainActivity.class), ActivityOptions.makeSceneTransitionAnimation(FristActivity.this).toBundle());//这个方法是简单的启动方式,上面写的什么效果就是什么效果。如果你实现的接口的话,当前方法。This就可以简写成this了。

共享动画的效果实现
ActivityOptions activityOptions=ActivityOptions.makeSceneTransitionAnimation(Activity activity, View shareElement, String shareElementName);
startActivity(new Intent(getApplicationContext(), MainActivity.class), activityOptions.toBundle());
其实方法基本上是相似的:区别就是在makeSceneTransitionAnimation中添加参数调用方法。
Activity activity:是当前的Activity的名称
View shareElement:是需要共享的控件对象,需要findViewByld获取到,可以不需要强制转换类型
String shareElementName:是获取要共享软件的name,那么是唯一的,需要你在xml文件中加入,在你想共享的控件下加入:
android:transitionName=”“//加入一个android原声的方法,在双引号里面写name,那么你就在上述方法中写name。注意这里是必须一致的,因为上述方法通过shareElementName来查找控件

还有一点就是在返回时需要结束动画后才能结束当前页面:在使用动画都不能直接用Activity.finish,因为直接finish没有过渡动画效果,所以用Acrivity.finishAfTransition,
@Override
public void onBackPressed() {
finishAfterTransition();//在过渡动画完成时在finish
super.onBackPressed();
}

Curved motion:曲线动画
有两种方式:自定义动画的曲线和曲线运动的模式
PathInterpolator类是一个新的语句贝塞尔曲线路径的插值器。
系统的提供了三种的基本曲线

@interpolator/fast_out_linear_in.xml
@interpolator/fast_out_slow_in.xml
@interpolator/linear_out_slow_in.xml

ObjectAnimator.ofFloat(view, View.X, View.Y, path)//属性动画的操作,View沿着X,Y方向,路径做运动

View state changes:View在变化的时候的动画
StateListAnimator类定义视图状态变化时的动画效果,
有两种方式:第一种在xml文件中写,另一种是从代码里写
第一种方式:在layout下加入这个方式
android:stateListAnimator=””
第二种:是就是在代码里使用:
AnimatorInflater.loadStateListAnimator(Context cotext,int id);
Context context:是传递的上下文
Int id:是需要的做的动画效果,在anim文件下的动画效果
动画实现的两种方式:一种是代码的实现,使用
View.setStateListAnimator()
另一种是xml的实现,通过drawable下的xml文件实现
AnimatedStateListDrawable//只能放draable的动画
Animate Vector Drawables:矢量动画
VectorDraable矢量图片伸缩不失真
AnimateVectorDrawable矢量图动画
矢量动画通常包括三类xml文件:
矢量图,在res/drawable/:矢量图必须要有宽度高度这是物理的
在里面的有一个属性,在里面可以设置旋转等内容还可以设置X轴Y轴,在中可以设置,还要设置name,设置name的含义是方便调用,用fillColor设置颜色,在pathData中设置路径将图片绘制出来等
矢量图,在res/drawable/:设置动画的效果
用元素,在res/anim/:动画的实现
最后一步是(Animatable(Image)View).getDrawable()).Start();取出图片前置转换成Animatable然后Start就可以了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值