联雅网站建设,网络营销案例报告,游戏是怎么制作的,网络营销与直播电商主要学什么这是我这个系列的目录#xff0c;有兴趣的可以看下#xff1a; android 动画系列 - 目录tween 动画早些时候我们也叫补间动画(我也不知道为啥),现在也有叫 view 动画的。tween动画是2.X 时代的产物#xff0c;因为效果不理想#xff0c;4.X 时代推出了动画的升级版 属性动画…这是我这个系列的目录有兴趣的可以看下 android 动画系列 - 目录tween 动画早些时候我们也叫补间动画(我也不知道为啥),现在也有叫 view 动画的。tween动画是2.X 时代的产物因为效果不理想4.X 时代推出了动画的升级版 属性动画。给我的感觉 属性动画就是tween动画的升级版属性动画就是替换 tween 的现在来看也的确时这样的大部分的场景我们现在都是使用属性动画的只有一些较老的 api 中会使用 tween 动画。既然tween 动画和属性动画是承前启后的关系那么2者理所应当的在使用是很相似参数也很相似这里有些参数我们在 tween 动画这节中介绍过后就不再属性动画中介绍了。tween 动画实现的的4种动画效果平移动画 TranslateAnimation缩放动画 ScaleAnimation旋转动画 RotateAnimation透明度动画 AlphaAnimation对于tween 动画目前使用的机会并不是很多了使用时一般都是使用 定义好的动画xml文件推荐大伙这么做。xml 文件定义的位置/res/anim目录下通用 xml 属性介绍Snip20170722_18.png上面这些都是我在定义 xml tween 动画时会用到的属性上面的表里基本上很全了解释的也很到位android:startOffset100 注意这个 startOffset 参数这是动画执行的延迟时间tween 动画使用 startOffset 属性属性动画使用 delay 属性这是 tween 和属性动画在定义时需要注意的话说使用同一个单词不好嘛非要用2个...tween 动画数值体系和坐标体系先来说一下坐标体系这个属于大家应该熟记的也是能猜测出来的tween 动画时作用与 view 之上的那么 tween 的坐标体系也是以目标 view 的坐标为参考的。具体来说就是以 目标 view 的左上角为坐标原点。明白这点我么再往下面看。细心的朋友应该会发现我们在设置 tween 动画参数时出现过3种不同的写法3030%30%p。这3种写法有其不同的含义我们来仔细看一下。参数数值体系这里以平移来举例30以目标 view 的左上角为原点让 view 向右移动30px30%以目标 view 左上角为原点让 view 向右移动 view 宽度的30%30%p以目标 view 左上角为原点让 view 向右移动父容器宽度的30%了解了 tween 动画的坐标系再来看动画的数值参数移动的方向大伙都应该知道了那么具体上面3种写法就是偏移量的不同了30是 px 像素30%是以 view 自身宽高算的30%p 是以 view 的父容器的宽高算的缩放旋转动画的中心点大伙应该都恩那个猜出来是view 的左上角了吧我们学习很重要的一点就是举一反三看破一点总揽全局。translate位移动画效果图添加了自动返回的代码ezgif.com-video-to-gif.giftween 动画我们可以使用 xml 来定义也可以自己撸代码xml 定义android:duration600android:fromXDelta0android:fromYDelta0android:repeatCount1android:repeatModereverseandroid:toXDelta100android:toYDelta100/我们定义完 xml 文件后不就是完事了我们还得把动画绑定给一个 view 并开始才能启动动画效果Animation animation1 AnimationUtils.loadAnimation(this, R.anim.tran1); // R.anim.tran1是我们定义号的动画 xmlimageTest.startAnimation(animation1); // imageTest是要显示动画的 view这样我们就可以使用tween 动画了当然这是最简单的使用方式了注意看所有的 tween 动画的都实现了 Animation接口。对于 xml 的定义虽然上面介绍过参数的含义了我在这里还是说一下的好便于理解啊。duration 是动画执行时间我们要是不写的话默认是300ms在 xml 中时间都是以 ms 为单位的fromXDelta/fromYDelta 是动画开始时 view x/y 轴的偏移量一般我们都写0toXDelta/toYDelta 是位移动画在 view x/y 轴上最终的偏移量也可以理解为我们想让 view 到达的新位置也可以理解为动画的执行幅度repeatMode 是动画的重复模式有2个模式reverse/restart。 reverse是回复原状restart是重复执行。repeatCount 是动画的重复次数Animator.setRepeatCount(ValueAnimator.INFINITE) 也可以实现重复执行的效果fillAfter 动画执行后是否保留 view 所在的新位置 true 保留false 回归初始位置fillBefore 和fillAfter不一样不论是 true 还是 false都会回归初始位置这里注意 repeatMode/repeatCount 这2个参数必须都写才有意思只写一个是不成立的我在下面会专门说下重复模式和重复次数的问题这个和大家想象有些不一样我可是专门都跑了一遍才清楚的。java 代码定义TranslateAnimation translateAnimation new TranslateAnimation(0, 100, 0, 100);translateAnimation.setDuration(600);translateAnimation.setRepeatMode(TranslateAnimation.REVERSE);translateAnimation.setRepeatCount(1);imageTest.startAnimation(translateAnimation);我们也是可以 new 一个 tween 动画的直接实现类出来的这里使用的是 TranslateAnimation 最简单的构造函数上面说了 tween 动画有3种参数形式3030%30%p这里我们就来试试看啊不试试怎么能清楚尼...让我们来看看30%上面使用的是100px现在我们来看看100%是啥样子的看看和猜测的是不是一样向右位移自身尺寸的100%后应该是靠近右侧边缘了android:duration600android:fillAftertrueandroid:fromXDelta0android:fromYDelta0android:toXDelta100%android:toYDelta100%/效果图:ezgif.com-video-to-gif.gif啊和我们预计的一样向右位移了 view 自身的宽高值和明显的能够看出来接下来让我们看看 30%p为了效果明显数值这里使用了 80%pandroid:duration600android:fillAftertrueandroid:fromXDelta0android:fromYDelta0android:toXDelta80%pandroid:toYDelta80%p/效果图ezgif.com-video-to-gif.gif哈哈大伙注意啊这里 view 的父控件可是根视图节点了所以向右偏移量很大直接出去了大伙没有没想过要是给这个 view 添加一个父控件会怎么样呢...让我们来看看view 的大小是100dp给view 添加一个200dp 的外壳蓝色背景xml布局android:layout_width200dpandroid:layout_height200dpandroid:layout_centerHorizontaltrueandroid:backgroundcolor/colorPrimaryandroid:idid/acgandroid:layout_width100dpandroid:layout_height100dpandroid:layout_centerInParenttrueandroid:layout_marginTop50dpandroid:srccolor/colorAccent/动画不变还是设置80%p效果图ezgif.com-video-to-gif.gif啊嘞咱们的粉色的 view 怎么没了啦啦啦大伙不知道平时注意没有viewGroup 是不允许子控件超出自己的范围的所以咱们的 view 在位移出父控件的范围后就消失不见了这里我们需要设置一下需要在布局根节点设置android:clipChildrenfalse才行注意不是在这个父控件设置是在 xml 的根节点设置这点要注意啊看我的这篇文章 Android 布局小技巧汇总xml 根节点设置 android:clipChildrenfalse 才行Snip20170724_20.png效果图ezgif.com-video-to-gif.gif这样接可以看到效果了这次位移的幅度就是我们添加的这个200dp 的父控件了scale 缩放动画效果图ezgif.com-video-to-gif.gif这是缩放的效果和预想的有点不同的是缩放中心点怎么不是 view 的中心呢那么我们来看下 xml 代码android:duration600android:fillAftertrueandroid:fromXScale1android:fromYScale1android:toXScale0.3android:toYScale0.3/恩看上面的 xml 设置中里面没有设置缩放中心点的参数那么上面的缩放就是走的是默认设置了可以看到缩放的默认中心点是 view 的左上角这也是 tween 动画坐标系的原点从这一点考虑也是可以理解默认中心点在左上角的设置了。上面 xml 中属性的设置很好理解fromXX是动画开始的数值toXX 是动画结束时的数值这里说一下缩放的数值 1 是原始大小0是没有大小2是原始大小的2倍所以说缩放的参数很好理解。上面没写缩放中心点设置那么当然中心点也是可以设置的参数是pivotX/pivotY中心点的坐标比如中心点设置在 view 的中心数值可以这样写50% 。写0.5表示偏移量是px 值。50%p表示中心点在view 的左上角坐标父容器的宽高的一半之后的位置xmlandroid:duration600android:fillAftertrueandroid:fromXScale1android:fromYScale1android:pivotX50%android:pivotY50%android:toXScale0.3android:toYScale0.3/效果图ezgif.com-video-to-gif.gifrotate 旋转动画效果图ezgif.com-video-to-gif.gifxmlandroid:duration600android:fillAftertrueandroid:fromDegrees0android:pivotX50%android:pivotY50%android:toDegrees360/rotate 和 scale 差不多除了数值不同其他都一样。rotate 因为是旋转所以参数肯定是设置的旋转多少度需要注意的是正数是顺时针转负数是逆时针转其他的没什么可说的了。alphe 透明度动画效果图ezgif.com-video-to-gif.gifxml:android:duration600android:fillAftertrueandroid:fromAlpha1android:toAlpha0/哈哈看完上面的 alphe透明度动画很简单了吧注意数值1是不透明0是完全透明。tween动画的 repeat 重复模式translate 的第一个效果图就是使用了动画的重复模式的简单的说重复模式就是在动画结束后对 view 进行一些逻辑上的操作可以重复执行和反向执行。这里设计到2个参数设置 repeatMode / repeatCount重复模式 / 重复次数先看一下xml 的属性设置android:duration600android:fillAftertrueandroid:fromXDelta0android:fromYDelta0android:repeatCount1android:repeatModereverseandroid:toXDelta80%android:toYDelta80%/这里一个位移动画里面设置有重复模式和重复次数。首先说明一下repeatMode和repeatCount二者缺一不可必须都得写才能生效repeatMode 分2种reverse 反向执行动画就是动画时怎么来的就怎么回去restart 重复执行动画就是动画反复执行不过注意动画结束后就会回到初始位置显得有些突兀我们来看看效果是什么样的这样才好理解不是注意这里 repeatCount 都是设置为1reverse 反向执行效果图ezgif.com-video-to-gif.gifrestart 重复执行效果图ezgif.com-video-to-gif.gif这里使用了高采样率转换的 gif可以很 清楚的看出来在第一次动画执行完后瞬间 view 就回归到了初始位置再执行了一次动画中间切换的效果太突兀了不是很友好。好了看完了 repeatMode 那么大家来猜测下 repeatCount 重复次数的使用规律其实看完上面的都应该明白了重复次数是指动画在执行完成后再按照某种方式执行多少次我们写在 repeatCount 里面的数字是不包含第一次的注意这点基本就可以了比如我们想让上面这个动画来回执行2个大循环既动画执行完后反向执行一次这算一个大循环那么repeatCount我们写几呢是3不算第一次大伙算算自己试试下面是效果图ezgif.com-video-to-gif.gif好了是不是很咱们想的一样自己多动手多试试google 的 api 基本我们都能搞明白。AnimationSet 动画集合android 中的动画不单单可以单独执行一种效果更是可以多个动画效果一起执行的。下面看个例子android:duration600android:interpolatorandroid:anim/accelerate_decelerate_interpolatorandroid:shareInterpolatortrueandroid:fromXDelta0android:fromYDelta0android:repeatCount1android:repeatModereverseandroid:toXDelta80%android:toYDelta80%/android:fromAlpha1android:repeatCount1android:repeatModereverseandroid:toAlpha0.2/效果图ezgif.com-video-to-gif.gif单个动画中有的参数可以写到 set 动画集合中去比如时间但是重复这块就不行了我需要写到单个里才行set 中有2个新的属性 interpolator 这个是插值器是控制动画执行曲线的系统提供的默认值就够我们使用的了shareInterpolator 是设置所有的单项动画是否都使用 set 中的这个插值器具体的插值器我们下节说一看就懂监听方法差点忘了动画是可以加监听的很多时候我们在动画执行完成后要做点什么不是嘛animation1.setAnimationListener(new Animation.AnimationListener() {Overridepublic void onAnimationStart(Animation animation) {}Overridepublic void onAnimationEnd(Animation animation) {}Overridepublic void onAnimationRepeat(Animation animation) {}});AniamtionSet 动画集合也是可以添加监听的。上面的代码中提供了3个回调函数中规中矩开始结束重复。总结好了最后让我们来总结下使用时的注意点4种动画位移支持3种参数形式其他的不行重复模式和重复次数要搞清楚tween 动画虽然现在用的机会很少了但是这是 android 动画的基础之后的属性动画在使用时参数也是大体没有变化的。所以学好 tween 动画有其是期中一些参数的数值范围效果是很有必要的。好了就这么多了更多的在参考资料里啦参考资料
