Android：动画菜单图标

Question

我正在构建一个应用程序，我想为this dribbble gif之类的菜单图标设置动画。

怎么能实现这个目标？我必须使用TransitionDrawable。我认为也可以使用AnimationDrawable和动画集图像来完成。

执行此操作的最佳方式是什么？

Answer 1

HTML

  <div class="open" id="Button_Nav" onclick="Toggle_Menu()"></div>

CSS

.open{
    width:50px;
    height:50px;
    top:50%;
    left:50%;
    display:block;
    position:absolute;
    cursor:pointer;
    transform:translate(-50%,-50%);
    animation:hide-show 2.5s ease
    }

@keyframes hide-show{
    0%,99%{opacity:0}
    100%{opacity:1}
    }

.open:before,
.open:after{
    background:#000;
    content:"";
    height:5px;
    display:block;
    position:absolute;
    border-radius:2px;
    transition:all 2s ease
    }

.open:before
    {animation:open-before 2s ease both}

@keyframes open-before{
    0%{
        width:100%;
        top:15px;
        left:0;
        transform:rotate(45deg) translate(5px,5px)
        }
    25%{
        width:0;
        top:0;
        left:0;
        transform:rotate(45deg) translate(0,0)
        }
    50%{
        width:0;
        top:0;
        left:0;
        transform:rotate(0deg) translate(0,0)
        }
    90%{width:100%;top:0;left:0}
    100%{width:100%;top:15px;left:0}
    }

.open:after
    {animation:open-after 2s ease both}

@keyframes open-after{
    0%{
        width:100%;
        bottom:15px;
        left:0;
        transform:rotate(-45deg) translate(-5px,-5px)
        }
    25%{
        width:0;
        bottom:0;
        left:0;
        transform:rotate(-45deg) translate(0,0)
        }
    50%{
        width:0;
        bottom:0;
        right:0;
        transform:rotate(0deg) translate(0,0)
        }
    90%{width:100%;bottom:0;right:0}
    100%{width:100%;bottom:15px;right:0}
    }

/* When the "Button_Nav" clicked, the "open" will be replaced with the "close" */

.close:before,
.close:after
    {background:#ea2c59}

.close:before
    {animation:close-before 2s ease both}

@keyframes close-before{
    0%{width:100%;top:15px;right:0}
    25%{width:100%;top:0;right:0}
    50%{
        width:0;
        top:0;
        right:0;
        transform:rotate(0deg) translate(0,0)
        }
    90%{
        width:0;
        bottom:0;
        right:0;
        transform:rotate(-45deg) translate(0,0)
        }
    100%{
        width:100%;
        top:15px;
        right:0;
        transform:rotate(-45deg) translate(-5px,5px)
        }
    }

.close:after
    {animation:close-after 2s ease both}

@keyframes close-after{
    0%{width:100%;bottom:15px;left:0}
    25%{width:100%;bottom:0;left:0}
    50%{
        width:0;
        bottom:0;
        right:0;transform:rotate(0deg) translate(0,0)
        }
    90%{
        width:0;
        bottom:0;
        right:0;
        transform:rotate(45deg) translate(0,0)
        }
    100%{
        width:100%;
        bottom:15px;
        right:0;
        transform:rotate(45deg) translate(-5px,-5px)
        }
    }

JS

function Toggle_Menu(){
   document.getElementById("Button_Nav").classList.toggle("close")
}

请参见以下示例：https://codepen.io/uzcho_/pen/RJEXdG