2015-01-28 码农明明桑
动画可以在视觉上增加程序的流畅度,我之前对于动画这一块,是会用,但是不全面,这里写下博客,全面梳理一下Android动画方面的知识。当然,关于动画这块,也有很多前人写了很多内容,大家可以去参考。 3.0以前,android支持两种动画模式,Tween Animation,Frame Animation,在android3.0中又引入了一个新的动画系统:Property Animation,这三种动画模式在SDK中被称为Property Animation,View Animation,Drawable Animation。 可通过NineOldAndroids项目在3.0之前的系统中使用Property Animation。另外呢 继续阅读 »
2015-02-01 码农明明桑
视图动画(View Animation),又称补间动画(Tween Animation),即给出两个关键帧,通过一些算法将给定属性值在给定的时间内在两个关键帧间渐变。本文首先讲解各种基本动画的使用,其实介绍View动画的工作过程。 概述 视图动画只能作用于View对象,是对View的变换,默认支持的类型有: 透明度变化(AlphaAnimation) 缩放(ScaleAnimation) 位移(TranslateAnimation) 旋转(RotateAnimation) 可以使用AnimationSet让多个动画集合在一起运行,使用插值器(Interpolator)设置动画的速度。 more 上面说到的几种动画,以及Ani 继续阅读 »
2016-06-07 码农明明桑
之前做过一个图上标签但是动画样式不太好看,经过查找资料发现了一种全新的思路来实现动画,流畅的让标签的线显示和隐藏,示例如下,就在这里说一说。本文会涉及到Path,Property Animation, PathEffect, PathMeasure。我们开始一一道来。 more 使用Path绘制曲线 当我们需要画曲线的时候,可能会直接使用drawLine来画,不太复杂的话还比较好实现,如果需要画曲线,或者拐弯的线的时候使用drawLine就比较复杂了。这时候,我们可以借助Path来drawPath。 java Paint paint = new Paint(); paint.setColor(Color.BLACK); p 继续阅读 »
2015-06-05 党洁
Android动画执行过程分析 1 View 调用动画启动 动画启动 重置一些状态 主要方法 public void startAnimation(Animation animation) { animation.setStartTime(Animation.START_ON_FIRST_FRAME); setAnimation(animation); invalidateParentCaches(); invalidate(true); } 继续阅读 »
2018-05-20 jude
序 这是篇笔记性质的文章,没多少技术含量。 之前一直很少接触 CSS 动画,前段时间刚好做了个相关活动,实现了包含位移、渐现、一次性效果和循环效果的动画。 效果 可以在这里先看一下最终效果。 继续阅读 »
2016-03-31 W.Y.
CSS 动画已经存在很多年了,使用恰当可以很好地提高网站的用户体验,也正是由于其容易使用,就很可能出现性能低下的动画,从而降低了整个页面的运行效率。回想一下:你曾经是否使用过 CSS 来改变元素的宽度、高度或绝对位置?如果回答是肯定的,就意味着你触发了性能低下的重排或重绘计算,在某些情况下甚至可能导致页面闪烁。 什么样的情况会导致页面闪烁呢?现代浏览器根据设备的刷新率来刷新页面中的内容,对大多数设备而言,屏幕以 60 次每秒的频率刷新,即 60HZ。如果在屏幕上出现了某些运动,如滚动、过渡或动画,浏览器应该每秒刷新 60 帧,如果某些帧花费的时间太长,进而导致浏览器的刷新频率跟不上设备的刷新频率(跳帧现象),就会出现页面闪烁。所以 继续阅读 »
2016-03-03 Oliver Wang
@keyframes 基本写法是一个开始状态和一个结束状态: css @keyframes demo-anim { from { opacity: 1; } to { opacity: 0; } } See the Pen QNbBOy by Oliver (@ochukai) on CodePen. 其中 animation-iteration-count: number or infinite; 可以设置循环次数,infinite为无限次 还可以定义的很详细: ```css @keyframes demo-anim { from { transform: translate 继续阅读 »
2014-11-25 林长宇
Sangmin is a Senior JavaScript developer working at NHN and the creator of the JavaScript animation library Collie. I use collie framework to developed some HTML5 game. 继续阅读 »
2016-03-03 Oliver Wang
最近在写一个动画效果,使 ul 下面的 li 逐个进入,就像下图 做这个效果用到了 css 的 animation 中 animation-delay,给 li 设置入场动画后,再给 li 设置 animation-delay,像这样: css .li-animation-delay-1 { animation-delay: 0.1s; } 并且每一个 li 的 animation-delay 都比前一个 li 的长 .1s,也就达到了后面的 li 的入场动画后播放的效果。 因为 li 的数量也不确定,所以我打算批量生成一些 li-animation-delay-*, 查了一下 scss 正好有 for 的用法: 继续阅读 »