Android：动画菜单图标答案

【问题标题】：Android: Animated menu iconAndroid：动画菜单图标
【发布时间】：2014-08-21 13:21:05
【问题描述】：

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

如何做到这一点？我必须使用TransitionDrawable。我认为它也可以使用 AnimationDrawable 和动画图像集来完成。

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

【问题讨论】：

我认为动画可绘制/动画列表将是一个更好的解决方案。这就是在 android v7 支持库本身中完成 mediarouter 连接图标的方式。检查 mediarouter (chromecast) 连接图标。
@AnoopSS 你能给我一个链接吗？
查看操作栏中的图标developers.google.com/cast/images/a/…

标签： android animation icons

【解决方案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)
        }
    }

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

在此处查看工作示例：https://codepen.io/uzcho_/pen/RJEXdG

【讨论】：

这根本不是在回答问题。问题是关于安卓，而不是网络。您不能将 html 或 css 用于原生 Android GUI 代码。