Android：動畫菜單圖標

Question

我正在構建一個應用程序，我想動畫我的菜單圖標像這個運球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