多图片聚拢效果

作者: 云香水识 | 来源:发表于2016-06-14 15:25 被阅读106次

多图片聚拢效果
多肉水彩画(第四天)——皮氏石莲
运动：多图片展开、无缝滚动、无限运动、分步运动
聚拢
next主题搭建博客的记录
iOS-图片撕裂、掉帧初解读
浅析UIView动画之transform
ZGameEditor Visualizer
RN-第三方之react-native-image-zoom-v
石头画-金鱼（1）

参考效果： http://xuan.news.cn/zt/ouzhoubei.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聚拢效果</title>
    <style>
        #container {
            width: 900px;
            height: 480px;
            margin: 40px auto;
            position: relative;
            overflow: visible;
        }
        #container img {
            visibility: hidden;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 160px;
            margin: -50px 0 0 -80px;
            transition: all 2s ease;
        }
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="container">
        < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/33/wKhThldP4_AEAAAAAAAAAAAAAAA985.jpg" alt="">
        < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M03/06/35/wKhTh1dP5r8EAAAAAAAAAAAAAAA195.jpg" alt="">
        < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M05/04/DB/wKhThVdP65AEAAAAAAAAAAAAAAA306.jpg" alt="">
        < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M01/06/D8/wKhThldQ02IEAAAAAAAAAAAAAAA032.jpg" alt="">
        < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic001/M02/29/89/wKhTg1dQ21MEAAAAAAAAAAAAAAA496.jpg" alt="">
        < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/DD/wKhTh1dQ2GwEAAAAAAAAAAAAAAA281.jpg" alt="">
        < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M04/06/DD/wKhTh1dQ2I4EAAAAAAAAAAAAAAA955.jpg" alt="">
        < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/DD/wKhTh1dQ2JwEAAAAAAAAAAAAAAA723.jpg" alt="">
        < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M07/05/80/wKhThFdQ2tIEAAAAAAAAAAAAAAA659.jpg" alt="">
        < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M09/04/E5/wKhThFdP8m0EAAAAAAAAAAAAAAA547.jpg" alt="">
    </div>
    
    <p>图片和效果参考均来自 <a href="http://xuan.news.cn/zt/ouzhoubei.html">http://xuan.news.cn/zt/ouzhoubei.html</a></p>

<script>
    var container = document.getElementById('container');
    var images = container.children;


    /**
     * 每日一题: 书写随机算法，实现一个多图片聚拢的效果
     */

    /**
     * 生成初始化位置，需要较为远离中心点
     * @return 返回位置和旋转角度
     */
    var randomBegin = function () {
        // TODO
        return {
            left: 0,
            top: 0,
            rotate: 90
        };
    };

    /**
     * 生成结束位置，需要较为靠近中心点
     * @return 返回位置和旋转角度
     */
    var randomEnd = function (begin) {
        // TODO
        return {
            left: 460,
            top: 250,
            rotate: 1234
        };
    };

    [].slice.call(images).forEach(function (img, i) {
        // 初始化随机位置
        var begin = randomBegin();
        img.style.left = begin.left + 'px';
        img.style.top = begin.top + 'px';
        img.style.transform = 'rotate(' + begin.rotate + 'deg)';
        img.style.visibility = 'visible';
        var end = randomEnd(begin);
        setTimeout(function () {
            img.style.left = end.left + 'px';
            img.style.top = end.top + 'px';
            img.style.transform = 'rotate(' + end.rotate + 'deg)';
        }, 100 + i * 2000);
    });


</script>
</body>
</html>

简单参考答案： http://runjs.cn/detail/dziuvuuk