动画 | 易学教程

css动画轮播播放

阅读更多关于 css动画轮播播放

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; text-decoration: none; } ul li{ list-style: none; } .baner-box{ position: relative; width: 400px; height: 200px; overflow: hidden; } .banner{ width:1600px; position: absolute; left:0; animation-name: bannerMove; animation-duration: 8s; animation-iteration-count: infinite; } @keyframes bannerMove { 0%,30%{ left: 0; } 35%,65%{ left: -400px; } 70%,99%{ left: -800px; } 100%{ left: -1200px; } } .banner li{ float: left; width: 400px; height: 200px; } </style> </head> <body> <div

Android所有动画分类总结

阅读更多关于 Android所有动画分类总结

Android常用动画调研视图动画（View Animation）视图动画：也叫Tween（补间）动画可以在一个视图容器内执行一系列简单变换（位置、大小、旋转、透明度）。譬如，如果你有一个TextView对象，您可以移动、旋转、缩放、透明度设置其文本，当然，如果它有一个背景图像，背景图像会随着文本变化。补间动画通过XML或Android代码定义，建议使用XML文件定义，因为它更具可读性、可重用性。作用对象：作用于视图对象View，如TextView，不可作用于属性，如点击响应位置等。核心类：透明度动画(AlphaAnimation)、缩放动画(ScaleAnimation)、平移动画(TranslateAnimation)、旋转动画(RotateAnimation)。常用使用场景： 1、比如应用于ViewGroup的子元素，常用的ViewGroup，比如ListView的每个子元素出现时多有一个特定的动画；2、应用于Activity的切换，Activity切换过程中，系统有默认的动画，但是很普通，如果我们想自己定义，可以使用 overridePendingTransition(int enterAnim, int exitAnim)来指定动画。3、应用于Fragment的切换Fragmnet同样也可以添加动画切换，这个应该相对比较少用到

012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标

阅读更多关于 012 Android 动画效果(补间动画) +去掉App默认自带的标题+更改应用的图标

1.介绍补间动画开发者只需指定动画开始，以及动画结束 "关键帧"，而动画变化的"中间帧"则由系统计算并补齐！ 2. 去掉App的标题 (1)将AndroidManifest文件中Application标签中内容保持不变。 android:theme="@style/AppTheme"(即默认设置). (2)修改values->styles.xml中的设置将以下内容： <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 替换为： <resources>   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark<

【特效】hover效果之十字动画

阅读更多关于【特效】hover效果之十字动画

效果预览： http://www.gbtags.com/gb/rtreplayerpreview-standalone/3101.htm html: <div class="wrap"> <div class="box"> <span class="line_l"></span> <span class="line_r"></span> <span class="line_t"></span> <span class="line_d"></span> </div> </div> css: .wrap{ width:200px; height:200px; border:1px solid red; margin:0 auto;} .box{ width:0; height:0; position:relative; top:50%; left:50%;} .box span{ position:absolute; transition:1s; background:green;} .line_l{ width:0; height:1px; right:0; top:0;} .line_r{ width:0; height:1px; left:0; top:0;} .line_t{ width:1px; height:0; left:0; bottom:0;} .line_d{

【特效】hover效果之四线动画

阅读更多关于【特效】hover效果之四线动画

效果预览： http://www.gbtags.com/gb/rtreplayerpreview-standalone/3102.htm html: <div class="wrap"> <div class="box"> <span class="line_l"></span> <span class="line_r"></span> <span class="line_t"></span> <span class="line_d"></span> </div> </div> css: .wrap{ width:200px; height:150px; border:1px solid red; margin:0 auto; position:relative;} .wrap span{ position:absolute; background:green; transition:1s; opacity:0;} .line_l{ width:1px; height:50px; left:50px; top:50px; margin-top:25px;} .line_r{ width:1px; height:50px; left:150px; top:50px; margin-top:-25px;} .line_t{ width:100px; height:1px; left

CSS3动画，2D

阅读更多关于 CSS3动画，2D

2D 转换 transform 可以控制元素做转换：移动(translate)、旋转(rotate)、缩放(scale) 只能设定一次，不会影响到其它元素的位置移动：translate(x,y) / translateX(n) / translateY(n) 百分比是相对于自身元素的对行内标签没有效果 /* 基本示例 */ div { width: 100px; height: 100px; background-color: #ff0000; transform: translate(100px, 200px); /* transform: translateX(100px); transform: translateY(200px); */ } /* 常见水平垂直居中效果 */ div { position: absolute; top: 50%; left: 50%; width: 200px; height: 100px; background-color: #ff0000; transform: translate(-50%, -50%); } 旋转：rotate(90deg) 旋转中心点：transform-origin:x y (left top / right bottom / 10px 10px) /* 基本示例 */ div { width: 100px;

2020年

阅读更多关于 2020年

自己自从很久之前开通博客，从没有认真总结写过啥，借此2020/1/1日，开始重视起来，成为一名合格的程序猿！写了简单的进度条发现还有跳一跳的动画版的进度条想弄但是还看不懂代码还有动画怎么制作呢？来源： CSDN 作者： shine_growing 链接： https://blog.csdn.net/shine_growing/article/details/103805268

属性动画----Property Animation

阅读更多关于属性动画----Property Animation

一、Property Animation介绍属性动画可以对任何对象的属性进行动画（包括view），动画默认时间为300ms，默认帧率10ms/帧。在一个时间间隔内完成从一个属性值到另一个属性值得改变。属性动画是API11才有，之前的版本无法直接使用，可以采用开源动画库nineoldandroids来兼容以前的版本。 2、属相动画相关的类类名用途 ValueAnimator 属性动画主要的计时器，也计算动画后的属性的值，动画的执行类 ObjectAnimation ValueAnimation的一个子类，动画的执行类 AnimatorSet 动画集合 AnimatorInflater 用户加载属性动画的xml Evaluators 属性动画计算器，告诉了属性动画系统如何计算给出属性的值 Interpolators 动画插值器关系图： 3、相关属性介绍名称解析值 propertyName 属性名 alpha;scaleX;scaleY;rotate;translationX;translationY duration 时长 valueFrom 属性的起始值 valueTo 属性的结束值 startOffset 动画延迟时间 repeatCount 动画重复次数 repeatMode 重复模式 valueType 属性的类型 floatType，colorType

补间动画---- Tween Animation

阅读更多关于补间动画---- Tween Animation

一、补间动画的分类 Tween Animation作用对象时View，是一种渐进式动画。它支持四种动画效果：AlphaAnimation，ScaleAnimation， RotateAnimation，TranslateAnimation，他们分别对应Animation的四个子类。名称 xml根标签子类效果平移动画 translate TranslateAnimation 移动view 缩放动画 scale ScaleAnimation 放大缩小view 旋转动画 rotate RotateAnimation 旋转view 透明度动画 alpha AlphaAnimation 透明度变化view view动画集合 set AnimationSet 四种动画集合特点：实现方式：xml方式，对象类方式 xml实现方式，xml文件在 res/anim/ 文件下，根布局分别是alpha，scale，rotate，translate，set 对象类实现方式 AlphaAnimation，ScaleAnimation，RotateAnimation，TranslateAnimation，AnimationSet （2）通用属性名称解析 duration 动画持续时间，单位ms fillAfter boolean值，动画结束时的状态，当值为true是保持动画结束时的状态

web前端入门到实战：使用CSS实现图片帧动画与曲线运动

阅读更多关于 web前端入门到实战：使用CSS实现图片帧动画与曲线运动

在前端开发中，提到动画，我们可以：直接利用DOM实现动画。利用canvas实现动画。利用svg实现动画。直接用一张gif动图。利用图片实现帧动画。 ... 所有动画的基本原理都是：在短时间内连续依次展示对应的图片，这样在视觉上看起来就是'动'的了。本文主要来说一说第4点和第5点。图片帧动画当我们要实现的动画效果比较复杂，而且开发排期比较紧的情况下，用一张gif动图来实现动画是成本最低，效果也不错的一种方案。比如下面这种动画效果：可是如果我们想让动效在某个时候暂停，隔一段时间后，再从断点开始继续播放动效，用gif图就实现不了了。 gif图的动效是没有办法暂停的。这个时候，可以考虑采用图片帧动画。图片帧动画可以看做是：把gif图的原理在前端用代码实现了一遍。上面个那个动效，(假设)可以分成100帧，即100张图片，然后用代码控制100张图片依次显示。并且，可以随时在中途暂停。为了节省http请求，把100张图片合成一张雪碧图，然后用background-position去控制显示哪一张图。推荐一个很不错的图片生成工具：GKA 我把100张图片生成了一个竖直的雪碧图。在代码里，只需要更新DOM元素的background-position即可实现动画。首先第一个点需要注意：background-position设置的是背景图片相对于DOM元素的起始位置。

订阅动画