菜单

为列表增添布局动画效果

2019年9月22日 - XML

打赏支持笔者翻译更加多好作品,多谢!

任选一种支付办法

图片 1
图片 2

赞 收藏 1
评论

private ArrayAdapter<String> adapter;
private LayoutAnimationController lac;
private ScaleAnimation sa;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,new String[]{"Hello","World","jikexueyuan"});


    setListAdapter(adapter);

    sa = new ScaleAnimation(0,1,0,1);
    sa.setDuration(1000);
    lac = new LayoutAnimationController(sa,0.5f);
    getListView().setLayoutAnimation(lac);

}

滑下&淡入淡出

老是加多或删除八个品类列表都会很突兀,那致使了不协和的效用。那就让大家通过调度中度来创建叁个进一步流畅的滑行效果。

图片 3

(可在最早的文章查看效果)

此间与地方类名 fade 独一区别的是 height:2em 被移除掉了。因为类名
show 已带有了二个中度(承袭自第三个CSS片段),那样中度就能活动衔接了。

CSS

.slide-fade li { transition: all 0.4s ease-out; opacity: 0; }
.slide-fade li.show { opacity: 1; }

1
2
3
4
5
6
7
.slide-fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
}
.slide-fade li.show {
  opacity: 1;
}

给列表ListView增添动画效果,首先MainActivity承袭自ListView,通过setLayoutAnimation传四个LayoutAnimationController,就足以设置ListView的卡通片效果。
public class MainActivity extends ListActivity {

关于小编:刘健超-J.c

图片 4

前端,在路上…http://jchehe.github.io
个人主页
·
小编的文章
·
19
·
    

图片 5

}

无动画

在最主旨的成效中,大家能写一些 CSS 代码展现列表项目。因为增多类名 show
让它们可知,所以删掉类名 show 也能促成它们未有。

CSS

li { list-style: none; background: #d1703c; color: #fff; height: 0;
line-height: 2em; margin: 0; padding: 0 0.5em; overflow: hidden; width:
10em; } li.show { height: 2em; margin: 2px 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
li {
  list-style: none;
  background: #d1703c;
  color: #fff;
  height: 0;
  line-height: 2em;
  margin: 0;
  padding: 0 0.5em;
  overflow: hidden;
  width: 10em;
}
 
li.show {
  height: 2em;
  margin: 2px 0;
}

那么些样式将 li 设置为一个从未有过项目符合、height 为 0、margin 为 0和
overflow 为 hidden 的矩形。那样做是为了直到增加类名
show,它们才会冒出而变得可知。

类名 show 应用了 height 和
margin。因为大家现今还没利用动画片,所以列表项目会一贯出现在页面,像下边那样。当然你也得以点击列表项目,让它们未有。

图片 6

(可在最早的文章查看效果)

一些 JavaScript 代码

为了达成演示里的动画,将会编写一些 JavaScript
代码来增多新列表项目,然后为新扩展加列表项目增加类名
“show”,以至动画能够暴发。使用那三个步骤的理由是,若是列表项目一直以可知的意况增添进去,它们就平素不别的过渡时间而直接发生了。

咱俩准备在 li 成分上应用动画片效果,但那将会让通过覆盖样式来增多其他删除元素的动画片效果,变得越来越不方便。

JavaScript

/* * Add items to a list – from cssanimation.rocks/list-items/ */
document.getElementById(‘add-to-list’).onclick = function() { var list =
document.getElementById(‘list’); var newLI =
document.createElement(‘li’); newLI.innerHTML = ‘A new item’;
list.appendChild(newLI); setTimeout(function() { newLI.className =
newLI.className + ” show”; }, 10); }

1
2
3
4
5
6
7
8
9
10
11
12
/*
* Add items to a list – from cssanimation.rocks/list-items/
*/
document.getElementById(‘add-to-list’).onclick = function() {
  var list = document.getElementById(‘list’);
  var newLI = document.createElement(‘li’);
  newLI.innerHTML = ‘A new item’;
  list.appendChild(newLI);
  setTimeout(function() {
    newLI.className = newLI.className + " show";
  }, 10);
}

侧面旋转

现行反革命我们借使稍稍调解那一个职能,就会丰硕便于地开创差别的统一企图。上面这些事例,是让项目列表在左侧旋转。

图片 7

(可在最早的文章查看效果)

要开创那个职能,大家只需改变旋转轴。

CSS

.swing li { opacity: 0; transform: rotateY(-90deg); transition: all 0.5s
cubic-bezier(.36,-0.64,.34,1.76); }

1
2
3
4
5
.swing li {
  opacity: 0;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

咱俩已经把 rotateX 改成 rotateY 了。

浏览器内核前缀和浏览器测量检验

为了可读性,上边那么些代码都未有包罗别的前缀。在这里,笔者猛烈推荐加多前缀,以扶助那二个须要
-webkit
或别的前缀的浏览器。而自个儿利用了 Autoprefixer 来化解那几个主题素材。

正因为这个动画片都是在主导的 show/hide
上构建的,所以它们在不辅助那几个动画片的浏览器上优雅地回降。在五花八门的器材和浏览器上拓展测量试验是任重(Ren Zhong)而道远的,但半数以上当代浏览器都能支持那些动画片。

打赏帮助笔者翻译越多好小说,多谢!


打赏译者

编写HTML代码

在一起首,策动好叁个已提早填充好的列表和一个足以为该列表增加新品类的按键。

XHTML

<ul id=”list”> <li class=”show”>List item</li> <li
class=”show”>List item</li> </ul> <button
id=”add-to-list”>Add a list item</button>

1
2
3
4
5
<ul id="list">
<li class="show">List item</li>
<li class="show">List item</li>
</ul>
<button id="add-to-list">Add a list item</button>

但有一点地方要求专心。首先,在HTML代码里有七个 ID。一般的话,大家不会用
ID 来安装样式,因为它们的唯一性会引进一些标题。然则,它们会在利用
JavaScript 时提供了便利性。

初阶列表项目有类名
“show”,正因为那是类名,大家将会在末端通过它为成分加多动画功用。

淡入淡出

作为第二个卡通,大家将会增加贰个简约的淡入淡出效果。相对在此之前的花色列表,该列表项目多了渐变效果。就算在视觉上看起来依旧有有些笨重,但那便于让浏览者有更加长的岁月去留心有东西正在调换。

图片 8

(可在原来的书文查看效果)

因为要在已创造 CSS
片段上加多效果。所以为了在列表上行使这一个效应,要求在包围 li
的器皿上增多类名 fade

CSS

.fade li { transition: all 0.4s ease-out; opacity: 0; height: 2em; }
.fade li.show { opacity: 1; }

1
2
3
4
5
6
7
8
.fade li {
  transition: all 0.4s ease-out;
  opacity: 0;
  height: 2em;
}
.fade li.show {
  opacity: 1;
}

给列表项目拉长动画

2015/05/08 · CSS,
HTML5,
JavaScript · 1
评论
·
动画

本文由 伯乐在线
刘健超-J.c
翻译,周进林
校稿。未经许可,禁止转发!
俄文出处:cssanimation.rocks。招待参加翻译组

当网页某部分发生变动时,增加一些动画片有利于让客商知道发生了怎么样业务。因为动画能预先报告新内容的到达,也许让顾客知道消息被移除。在这篇作品里,将会看出哪些运用动画帮忙新内容的推荐介绍,比方彰显或遮掩列表里的品类。

图片 9

(可在原版的书文查看效果)

引入内容

动画片有个很好的用途,它亦可让访客知道你的网址内容在哪一天发生了改观。当增加或删除内容而未有别的动画进行连接时,内容的突兀改变会让顾客感到吸引不解。而经过抬高细微的动画就能够幸免这种气象发生,何况有利于“发表”有东西将要离开或引进页面。

以下是叁个经过丰硕或删除操作来管理列表内容的例子。大非常多卡通能用来其余类型的开始和结果。如若您发觉它们是实用的,或有别的想法想增加进去,那么请 关系大家,大家很情愿听听你的主见。

旋转进来

除此而外淡入淡出和滑动效果,还是能够更为地抬高级中学一年级些 3D 效果。浏览器不仅能在 X
或 Y 轴上转换到分,还具备深度的情景( Z 轴)。

图片 10

(可在原来的作品查看效果)

为了设置这一个意义,要求定义一个 section 容器作为 3D 过渡的戏台。通过给
perspective 赋值就足以实现。

CSS 的 perspective
代表场景的纵深。贰个十分低的数值意味着近视角,是八个极端的角度。所以那值得您通过设置区别的值来找到二个适宜的值。

CSS

.swing { perspective: 100px; }

1
2
3
.swing {
  perspective: 100px;
}

下一步是设置 li 成分在那么些舞台里的变形。大家将会接纳 opacity
创设淡入淡出效果作为开局,然后为在戏台上的 li 添加 transform
进行旋转。

CSS

.swing li { opacity: 0; transform: rotateX(-90deg); transition: all 0.5s
cubic-bezier(.36,-0.64,.34,1.76); } .swing li.show { opacity: 1;
transform: none; transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

1
2
3
4
5
6
7
8
9
10
11
.swing li {
  opacity: 0;
  transform: rotateX(-90deg);
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}
 
.swing li.show {
  opacity: 1;
  transform: none;
  transition: all 0.5s cubic-bezier(.36,-0.64,.34,1.76);
}

在这一个事例中,让 li 绕X 轴向后旋转 90 度作为初叶状态。当加多类名
show 时,它的 transform 被安装为
none,那就会让它在戏台上扩充对接了。为了给它旋转效果,小编利用了
cubic-bezier 时间函数。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图