App动效类型大梳理

   <p><img src="https://simg.open-open.com/show/b1f8bc22516c9911195889ebb379dd18.jpg"></p>    <p>App中的动效设计不是具体的需求设计，不能对产品本身产生很大的变化和改进，只是能在设计层面和体验层面为用户创造多一点的价值。所以在做相关设计的时候，不可为做动效而做动效，要把握住动效的“度”，不可华而不实，需要服务于具体的需求和场景。</p>    <p>App的庞大复杂度和动效的丰富度成反比，App越复杂，其动效也应该轻量化而简洁。App功能越简单，其动效则可以适度丰富，甚至形成与自己App相符合的动效风格。</p>    <p>主要分为以下几部分：</p>    <h2><strong>一、控件动画</strong></h2>    <p>控件动画，可在动画运动曲线、动画出现方向等方面，进行统一处理。给用户带来顺滑的转场动画，让整个页面更加顺滑，并且有规则。</p>    <p>分为以下6种：</p>    <p>1 toast 提示条（出现——消失动画）</p>    <p>2 dialog（出现——操作——消失动画）</p>    <p>3 导航／页签切换动画</p>    <p>4 actionsheet动画</p>    <p>5 分享控件动画</p>    <p>6 选择控件动画</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/4124701c363e7b58b3e8c447dcbb2f91.png"></p>    <h2><strong>二、加载动画</strong></h2>    <p>分为以下5种：</p>    <p>1 下拉刷新加载</p>    <p>下拉加载一般分为两种形式：动画加文字、纯动画。</p>    <p>2 切换新页面数据加载</p>    <p>当切换到新页面时，常常会有加载数据的时候。主要有：转菊花的动画，进度条的动画，百分比的进度动画。</p>    <p>3 页面上拉加载</p>    <p>上拉加载的样式不会过于复杂，一般与下拉加载的动画配套来实现，上下尽量保持一致。</p>    <p>4 页面局部加载</p>    <p>常见的局部加载场景有视频列表、加载图片的占位图等。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/48a6db0a9a018b2a222683e44c8ae838.png"></p>    <h2><strong>三、细节动画</strong></h2>    <p>有以下2种：</p>    <p>1 点赞动画</p>    <p>点赞分为连续赞和单独赞。点赞时为了给用户营造良好的用户体验和心里满足，一般会藏有彩蛋动画，从而刺激用户点击欲。</p>    <p>2二维码动画</p>    <p>下落收起动画，二维码作为社交app中的个人身份的代表，大多使用card下落又收起的动画。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/7149d7ba45fd82c79f8db58eb8bcda27.png"></p>    <h2><strong>四、功能模块动画</strong></h2>    <p>根据各个app的突出特色功能和亮点功能，一体化的设计它那个模块的动画，详细刻画。启动页加载动画。</p>    <p>例如社交类app的寻找好友模块，加好友模块。</p>    <p>例如安全类app的安全扫描模块，安全检测模块。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/190035aa4af43ff55c9482a94017f0bd.png"></p>    <h2><strong>五、彩蛋动画</strong></h2>    <p>为了用户营造惊喜，和体现产品设计逼格的地方。在产品关键路线中的一些彩蛋动画设计，能为用户带来较高的愉悦感。在聊天软件中的，关键词彩蛋，丰富聊天情感，增强互动。</p>    <p>例如same app中，随着上拉刷新，鸡的眼神和嘴形都有变化。</p>    <p>例如涂手 app中，随着上拉刷新，手指间的小动作，戳戳手的小互动，让人在等待刷新过程中，更加有情感化和趣味性。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/7b645ffeec0b96579e1538d155046766.png"></p>    <p>除此之外，还有运营动画，各类banner动画。它需要根据各类需求，选择适合的动画。在这里不做统一的划分，它需要结合具体的场景、表达内容点以及传达意图来说。</p>    <p> </p>    <p>来自：https://zhuanlan.zhihu.com/p/24832096</p>    <p> </p>