多个图片层叠转圈的动画

作者: 洋芋和叶子的故事 | 来源:发表于2021-07-14 17:01 被阅读0次

多个图片层叠转圈的动画
android 动画基础
基本网页特效（二）
YYImage之YYSpriteSheetImage
layer_list
Android高级UI——PathMeasure和Matrix
动画
canvas多个元素的动画
图片层叠效果
pygame里操作事件

最近公司要更新官网了，本来技术团队有前端开发工程师的，但是核心任务太重，就把这个官网升级的项目进行了外包，在等待外包团队响应期间，为了验证这些页面动画的复杂度期间，我作为一个做后端开发（.NET/C#）出生的项目经理，根据自己对前端动画的理解，编写了这样一个转圈圈的动画效果，以供各位参考和交流把！

先直接上效果图，文案稍作修改了（图形是公司设计师设计的，还是不要照搬咯）：

效果图.gif

这个里面涉及到的几个技术点主要有以下几个部分：

各圆圈的布局样式，外圈、中圈、内圈等好几层的图片的样式处理。
中圈上的7个（或其他个数）小圆圈的布局样式。
各个需要旋转的图层动画样式处理。
小圈mouseover后的暂停及样式处理和移开后的重新启动。

因为我个人对于现在的Vue/React等等不是太深入，还是习惯以前的js和jquery那一套，所以实现的话就是用的这些技术。后文会有完整实例代码可供下载，希望有需要的朋友可以一起交流、学习。

最基础的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./js/jQueryRotate.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/t.css" />
    <title>技术亮点</title>
</head>
<body>
    <div class="header" style="height: 400px;"></div>
    <div class="banner"></div>
    <div class="content">
    </div>
    <div class="footer" style="height: 400px;"></div>
</body>

以上就是一个网站的基础结构，里面用到了jquery和基于jquery的图层旋转动画插件js：jQueryRotate.js，以及自己编写的t.css样式文件，后面我们将在class="content"的div标签里面完成本次动画效果设计。

各圆圈的布局样式

HTML代码

        <div class="core_technology">
            <div class="core_technology_tip">
                <div class="tip_title">核心技术</div>
            </div>
            <div class="core_technology_animation">
                <span class="core_technology_animation_text">
                    核心技术
                </span>
                <img class="core_technology_animation_outest animation_out_img" src="asset/img-circle-outest.png">
                <img class="core_technology_animation_outer animation_out_img" src="asset/img-circle-outer.png">
                <img class="core_technology_animation_center_b animation_out_img" src="asset/img-circle-center-background.png">
                <img class="core_technology_animation_center_f animation_out_img" src="asset/img-circle-center-front.png">     
                <img class="core_technology_animation_center_p animation_out_img" src="asset/img-circle-center-partial.png">  
                <img class="core_technology_animation_center_s animation_out_img" src="asset/img-circle-center-shadow.png">
                <img class="core_technology_animation_center_l animation_out_img" src="asset/img-circle-center-left.png">
                <img class="core_technology_animation_center_dl animation_out_img" src="asset/img-circle-center-dot.png">
                <img class="core_technology_animation_center_dr animation_out_img" src="asset/img-circle-center-dot.png">
                <img class="core_technology_animation_center_r animation_out_img" src="asset/img-circle-center-right.png">
                <img class="core_technology_animation_inner animation_out_img" src="asset/img-circle-inner.png">
                <img class="core_technology_animation_innest animation_out_img" src="asset/img-circle-innest-big.png">
            </div>
        </div>

因为各圆圈图片的样式是一样的风格，只是每个图片的尺寸不一样，故设计了animation_out_img这个class作为统一的样式布局，每个img各自特有的class属性后面会用来单独设置旋转的样式，希望向左旋转或者向右旋转，都可以单独设置。

CSS代码

body {
    width: 100%;
    /* background-color: black; */
    text-align: center;
    margin: 0;
}

.tip_title {
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    line-height: 59px;
    /* identical to box height */
    text-align: center;
}

.core_technology_animation {
    position: relative;
    width: 1106px;
    height: 1106px;
    text-align: center;
    margin: auto;
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.animation_out_img {
    position: absolute;
}

.core_technology_animation_outest {
    width: 1106px;
    height: 1106px;
}

.core_technology_animation_outer {
    width: 833px;
    height: 833px;
}

.core_technology_animation_center_b {
    width: 490px;
    height: 490px;
}
/* 其他类似，只是设置对应的长宽即可  */

.core_technology_animation_text {
    font-size: 52px;
    position: absolute;
    color: #004EA2;
    z-index: 100;
    font-style: normal;
    font-weight: 600;
    line-height: 73px;
}

.animation_img_container {
    position: absolute;
    display: flex;
    width: 1106px;
    height: 1106px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

中圈上的7个（或其他个数）小圆圈的布局样式

这里就需要确认一下小圆圈布局形成的总体样式，是要确保小圆圈本身形成一个大圆，这样的话就需要确认大圆的半径和圆心位置，但是在html里面只有offtop和offleft属性可以用，所幸我们刚好是要将小圆圈位置安排在第二个大圆圈上，这样的话可以将半径设计成大圆圈的半径。
这里的布局代码逻辑是参考一篇文章，从而摘录过来的，请大家可以参考：JavaScript时间轮盘：js元素圆形布局制作时间轮盘动画 - 云+社区 - 腾讯云 (tencent.com)

HTML代码

                <!-- div层级同圆圈img的层级 -->
                <div class="core_technology_items">
                    <div class="core_technology_item" id="item_bjcj">
                        <div class="core_technology_item_content">
                            <div><img class="circle_icon" src="asset/icon-circle-bjcj.png"></div>
                            <div class="core_technology_item_content_text">
                                <div>.NET/.net core</div>
                                <div>开发技术</div>
                            </div>
                        </div>
                        <img class="circle_img" src="asset/img-circle-item.png">
                    </div>
                    <div class="core_technology_item" id="item_czjs">
                        <div class="core_technology_item_content">
                            <div><img class="circle_icon" src="asset/icon-circle-czjs.png"></div>
                            <div class="core_technology_item_content_text">
                                <div>区块链</div>
                                <div>智能上链</div>
                            </div>
                        </div>
                        <img class="circle_img" src="asset/img-circle-item.png">
                    </div>
                    <div class="core_technology_item" id="item_bjsb">
                        <div class="core_technology_item_content">
                            <div><img class="circle_icon" src="asset/icon-circle-bjsb.png"></div>
                            <div class="core_technology_item_content_text">
                                <div>算法识别</div>
                                <div>AI技术</div>
                            </div>
                        </div>
                        <img class="circle_img" src="asset/img-circle-item.png">
                    </div>
                    <div class="core_technology_item" id="item_sfjd">
                        <div class="core_technology_item_content">
                            <div><img class="circle_icon" src="asset/icon-circle-sfjd.png"></div>
                            <div class="core_technology_item_content_text">
                                <div>如何商业</div>
                                <div>应用技术</div>
                            </div>
                        </div>
                        <img class="circle_img" src="asset/img-circle-item.png">
                    </div>
                    <div class="core_technology_item" id="item_bjjl">
                        <div class="core_technology_item_content">
                            <div><img class="circle_icon" src="asset/icon-circle-bjjl.png"></div>
                            <div class="core_technology_item_content_text">
                                <div>多点存储</div>
                                <div>一键必达</div>
                            </div>
                        </div>
                        <img class="circle_img" src="asset/img-circle-item.png">
                    </div>
                    <div class="core_technology_item" id="item_bjhy">
                        <div class="core_technology_item_content">
                            <div><img class="circle_icon" src="asset/icon-circle-bjhy.png"></div>
                            <div class="core_technology_item_content_text">
                                <div>智能回滚</div>
                                <div>无忧管理</div>
                            </div>
                        </div>
                        <img class="circle_img" src="asset/img-circle-item.png">
                    </div>
                    <div class="core_technology_item" id="item_bsmm">
                        <div class="core_technology_item_content">
                            <div><img class="circle_icon" src="asset/icon-circle-bsmm.png"></div>
                            <div class="core_technology_item_content_text">
                                <div>优美动画</div>
                                <div>直击心灵</div>
                            </div>
                        </div>
                        <img class="circle_img" src="asset/img-circle-item.png">
                    </div>
                </div>

CSS代码

.core_technology_items .circle_img {
    width: 146px;
    height: 146px;
    z-index: 30;
}

.core_technology_item {
    width: 146px;
    height: 146px;
    position: absolute;
    border-radius: 49%;
}

.core_technology_items {
    width: 100%;
    height: 100%;
    ;
}

.core_technology_item_content {
    position: absolute;
    z-index: 1;
    width: 146px;
    height: 146px;
    padding-top: 27px;
    ;
}

.core_technology_item_content .circle_icon {
    width: 40px;
    height: 40px;
}

JS代码

<script>
    $(function () {
        var dotTop = $('.core_technology_animation').height() / 2 - $('.core_technology_items .circle_img').height() / 2;
        var dotLeft = $('.core_technology_animation').width() / 2 - $('.core_technology_items .circle_img').width() / 2;
        //起始角度，该属性暂未用到
        var stard = 30; 
        //半径（可以动态获取需要放置的圆圈半径，这里暂时写死）
        var radius = 410;
        //每一个BOX对应的角度;
        var avd = 360 / $(".core_technology_item").length;
        //每一个BOX对应的弧度;
        var ahd = avd * Math.PI / 180;
        //设置圆的中心点的位置，对应的+和-号大家可以根据实际情况调整，决定圆圈的顺序和起始位置。
        $(".core_technology_item").each(function (index, element) {
            $(this).css({ "left": Math.sin((ahd * index)) * radius + dotLeft, "top": -Math.cos((ahd * index)) * radius + dotTop });
        });
    });
</script>

各个需要旋转的图层动画样式处理

现在就是主要的布局已经完成了，需要让圆圈圈动起来，这里就用到了jQueryRotate.js的旋转效果封装方法了。大家有需要可以去该工具的官网进行了解。地址：jQueryRotate - rotate image in browser by any angle

大家需要哪个元素动起来就绑定对应的class值就可以了，然后100代表的是100毫秒变换一个角度，0.5/1/-1代表每次变换的角度大小，正数代表正向旋转，负数代表反向旋转，大小代表旋转的快慢。
现在上自动旋转的代码：

        function create_rotate(obj, angle, interval) {
            let orgAngle = 0;
            setInterval(function () {
                orgAngle += angle;
                obj.rotate(orgAngle);
            }, interval);
        }  
        //大家需要哪个元素动起来就绑定对应的class值就可以了，然后100代表的是100毫秒变换一个角度，0.5/1/-1代表每次变换的角度大小，正数代表正向旋转，负数代表反向旋转，大小代表旋转的快慢。
        create_rotate($(".core_technology_animation_outest"), 0.5, 100);
        create_rotate($(".core_technology_animation_outer"), -1, 100);
        create_rotate($(".core_technology_animation_inner"), 1, 100);
        create_rotate($(".core_technology_animation_innest"), 1, 100);
        create_rotate($(".core_technology_animation_center_f"), -1, 100);

现在因为小圆圈的动画效果会更复杂一下，存在鼠标移上去后会暂停旋转动画，并弹出提示，故需要单独写动画的处理结果。让我们继续看吧！

小圈mouseover后的暂停及样式处理和移开后的重新启动

先将弹窗tip的内容和样式写好吧，里面用到一些小的处理方式，边贴代码边和大家讲吧！

HTML代码
因为弹窗tip可能内容比较多，所以有可能超出大圆圈的最大边界，所以class="core_technology_tips"的位置同class="core_technology_animation"的层级一致，没有在旋转动画的div板块里面；同时每个tip应该对应到指定的小圆上面，为了方便匹配，这里针对每个tip都设置了一个特别的id属性，比如id="item_bjcj_tip"，你会发现，id="item_bjcj"就是前面每个小圆圈的id，这样多一个_tip的设计可以方便后面进行统一的处理。

            <div class="core_technology_tips">
                <div class="core_technology_item_tip tip_content_shadow tip_hide" id="item_bjcj_tip">
                    <div class="tip_content">
                        我们要做好自己的弹窗定位，人生有更多值得的事情去做，希望这是一个好的重新开始！
                    </div>
                    <img style="position: absolute;" src="asset/img-content-triangle.png">
                </div>
                <div class="core_technology_item_tip tip_content_shadow tip_hide" id="item_czjs_tip">
                    <div class="tip_content">
                        我们要做好自己的弹窗定位，人生有更多值得的事情去做，希望这是一个好的重新开始！
                    </div>
                    <img style="position: absolute;" src="asset/img-content-triangle.png">
                </div>
                <div class="core_technology_item_tip tip_content_shadow tip_hide" id="item_bjsb_tip">
                    <div class="tip_content">
                        我们要做好自己的弹窗定位，人生有更多值得的事情去做，希望这是一个好的重新开始！
                    </div>
                    <img style="position: absolute;" src="asset/img-content-triangle.png">
                </div>
                <div class="core_technology_item_tip tip_content_shadow tip_hide" id="item_sfjd_tip">
                    <div class="tip_content">
                        我们要做好自己的弹窗定位，人生有更多值得的事情去做，希望这是一个好的重新开始！
                    </div>
                    <img style="position: absolute;" src="asset/img-content-triangle.png">
                </div>
                <div class="core_technology_item_tip tip_content_shadow tip_hide" id="item_bjjl_tip">
                    <div class="tip_content">
                        我们要做好自己的弹窗定位，人生有更多值得的事情去做，希望这是一个好的重新开始！
                    </div>
                    <img style="position: absolute;" src="asset/img-content-triangle.png">
                </div>
                <div class="core_technology_item_tip tip_content_shadow tip_hide" id="item_bjhy_tip">
                    <div class="tip_content">
                        我们要做好自己的弹窗定位，人生有更多值得的事情去做，希望这是一个好的重新开始！
                    </div>
                    <img style="position: absolute;" src="asset/img-content-triangle.png">
                </div>
                <div class="core_technology_item_tip tip_content_shadow tip_hide" id="item_bsmm_tip">
                    <div class="tip_content">
                        我们要做好自己的弹窗定位，人生有更多值得的事情去做，希望这是一个好的重新开始！
                    </div>
                    <img style="position: absolute;" src="asset/img-content-triangle.png">
                </div>
            </div>

CSS代码
CSS代码只是控制单个tip的外框的样式，具体的位置得用JS代码进行控制。

.core_technology_item_tip {
    position: absolute;
    width: 540px;
    height: 80px;
    margin: auto;
    background: #FFFFFF;
    border-radius: 5px;
    /* z-index: 10000; */
}

.tip_hide{
    visibility:hidden;
}

.tip_show{
    visibility: visible;
}

.tip_content {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    text-align: left;
    padding: 14px 20px;
}

.tip_content_shadow {
    box-shadow: 0px 4px 10px rgba(89, 87, 87, 0.1);
}

JS代码

        function show_core_technology_item_tip(obj){
            //获取指定元素的id
            let curId = obj.parent().attr('id');
            let oprObj = $("#"+curId+"_tip");
            let curObjTop = obj.parent().offset().top;
            let curObjLeft = obj.parent().offset().left;
            let curObjWidth = obj.width();
            // console.log(obj);
            // console.log(obj.children());
            // console.log(obj.children().find('.circle_img'));
            // console.log(obj.children().find('.circle_img').width());
            // console.log($(obj.children().find('.circle_img')).width());
            let oprObjWidth = oprObj.width();
            let oprObjHeight = oprObj.height();
            oprObj.removeClass('tip_hide').addClass('tip_show').css('top',curObjTop - oprObjHeight - 20).css('left',curObjLeft - oprObjWidth/2 + curObjWidth/2 - 10);
        }

        function hide_core_technology_item_tip(obj){
            //获取指定元素的id
            let curId = obj.parent().attr('id');
            let oprObj = $("#"+curId+"_tip");
            oprObj.removeClass('tip_show').addClass('tip_hide')
        }

        //控制了hover就停止的功能
        function create_rotate_hover_stop(obj, angle, interval) {
            obj.each(function (index, element) {
                let orgAngle = 0;
                var intervalEvent = setInterval(function () {
                    orgAngle += angle;
                    $(element).rotate(orgAngle);
                }, interval);
                $(element).parent().rotate({
                    bind: {
                        mouseover: function () {
                            let eNewSrc =  $(element).attr('src').replace('.png','-dark.png');
                            let iconObj = $(element).siblings().children().find('.circle_icon')
                            let iNewSrc =  $($(element).siblings().children().find('.circle_icon')).attr('src').replace('.png','-dark.png');
                            $(element).parent().css('color', '#004EA2');
                            $(element).attr('src', eNewSrc);
                            $($(element).siblings().children().find('.circle_icon')).attr('src', iNewSrc);
                            clearInterval(intervalEvent);
                            console.log($(element));
                            show_core_technology_item_tip($(element))
                        },
                        mouseout: function (e) {
                            let eNewSrc =  $(element).attr('src').replace('-dark.png','.png');
                            let iNewSrc =  $($(element).siblings().children().find('.circle_icon')).attr('src').replace('-dark.png','.png');
                            $(element).parent().css('color', '#333333');
                            $(element).attr('src', eNewSrc);
                            $($(element).siblings().children().find('.circle_icon')).attr('src', iNewSrc);
                            intervalEvent = setInterval(function () {
                                orgAngle += angle;
                                $(element).rotate(orgAngle);
                            }, interval);
                            hide_core_technology_item_tip($(element))
                        }
                    }
                });
            })
        }
        //所有小圆圈都绑定该动画效果
        create_rotate_hover_stop($(".core_technology_items .circle_img"), 1, 100);

好了，现在所有代码就完事了，大家如果对jQuery不熟悉的话，需要去了解一下。因为jQueryRotate的bind方法只支持js的事件，故bind里面用的是mouseover和mouseout事件，而不是jQuery支持的mouseenter和mouseleave事件。
代码下载地址：https://www.aliyundrive.com/s/2NugoHCzVis

多个图片层叠转圈的动画
最近公司要更新官网了，本来技术团队有前端开发工程师的，但是核心任务太重，就把这个官网升级的项目进行了外包，在等待外...
android 动画基础
分类：帧动画（图片动画）视图动画属性动画帧动画：有多个图片组成方法：· AnimationDrawab...
基本网页特效（二）
动画动画原理动画函数封装缓动动画缓动动画原理缓动动画在多个目标点之间的移动点击animate按钮，图片...
YYImage之YYSpriteSheetImage
SpriteSheetImage 从一张大图片上面提取多个小图片来组成一个动画，将多个小图片集成到大图片的好处是可...
layer_list
将多个图片或 shape 按照顺序层叠起来。每个 item 标签里设置android:topandroid:bo...
Android高级UI——PathMeasure和Matrix
需求是做一个箭头转圈圈的动画画好坐标轴之后把图片加入到圆圈起点，发现图片选择旋转了90度使图片进行dx的反方向...
动画
加载动画，转圈的动画：视图整体缩小一定的比例
canvas多个元素的动画
多个图片元素的动画绘制步骤：每一帧动画的元素都重新绘制在画板中；将元素创建的对象放入数组中，遍历元素，图片加...
图片层叠效果
效果图实现这个效果主要用到的知识点就是CSS的伪类，关于伪类在简书上已经有很多人介绍，这里就不在赘述。代码 ...
pygame里操作事件
鼠标事件的应用图片拖拽画球多个球一起动动画效果