在浏览器中创建像移动应用程序一样的动画

Creating Animations like a mobile app in browser

本文关键字：一样 动画 应用程序 浏览器 创建 移动      更新时间：2023-09-26

这可能是一个愚蠢的问题，但是有没有一种方法可以在浏览器中创建像移动应用程序一样的动画?参考链接:http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-meaningful-transitions-examples

如果能造出这样的东西就太好了。我知道一点javascript/jquery，但这似乎是我的知识。

任何技术细节都会有帮助

您可以尝试使用famo。美国:http://famo.us/

这是一个新的框架，所以有一些问题，但它有潜力。它依赖于矩阵变换，可以做一些非常神奇的事情，比如:http://www.youtube.com/watch?v=6jg-PlisAFc

您可以在这里查看更多演示:http://famo.us/demos/

这里有一个DNA螺旋的例子:http://www.youtube.com/watch?v=JbIL3asjZBs

这里有一个小例子，你可以用一点jQuery来触发动画与类的变化和CSS3过渡来处理动画。

它需要一些调整和自定义来达到链接动画的质量，但它表明CSS3/jQuery动画可以非常流畅。

HTML: 

<header></header>
<section>
    <article>
        <div class="wrap">
            <img src="" alt="" />
            <p>some text</p>
        </div>
    </article>
    <article>
        <div class="wrap">
            <img src="" alt="" />
            <p>some text</p>
        </div>
    </article>
    ....
</section>
CSS: 

body,html{margin:0;}
header{
    height:100px;
    background:#000;
}
article{
    float:left;
    width:50%;
    padding-bottom:16%;
    position:relative;
    color:#fff;
}
article .wrap{
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:1;
    background-color: rgba(0, 0, 0, 0.9);
    -webkit-transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
    transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
}
article .wrap img{
    display:block;
    width:100%;
    height:auto;
}
footer{
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
    background:#000;
}
article:nth-child(odd) .wrap.show{
    width:200%;
    height: 100vh;
    z-index:2;
    -webkit-transition: width 0.2s ease-out, height 0.6s ease-out;
    transition: width 0.2s ease-out, height 0.6s ease-out;
}
jQuery: 

$('.wrap').click(function(){
    $('.wrap').not(this).removeClass('show');
    $(this).toggleClass('show');
});
相关文章：