V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
orzorzorzorz
V2EX  ›  问与答

关于工具中动效的设计

  •  
  •   orzorzorzorz · 2019-09-27 10:53:37 +08:00 · 1492 次点击
    这是一个创建于 1102 天前的主题,其中的信息可能已经有所发展或是发生改变。

    背景

    https://deploy-preview-125--mini-xmind.netlify.com/

    打开后,鼠标移到 test4test5,鼠标滚轮向前及向后滚即可看到效果:移入 test4 向前滚,test, test2, test3, test5 消失,显示 test8

    问题点

    现在需要加入过渡动画,让新显示的内容移动到可见屏幕中央,并让其父节点 test4 移动到左上角作面包屑。该如何设计这个过渡动画?

    直接通过这样的平移 transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

    看上去效果过于生硬。而我,脑子里只有这种过渡...

    希望获得帮助的点

    1. 如果我问的问题比较容易,希望给出可以参考的链接或者描述一下大致移动轨迹
    2. 如果我问的问题很复杂,希望给出一些搜索用的关键字,或者需要看的书
    8 条回复    2019-09-27 18:02:34 +08:00
    redbuck
        1
    redbuck  
       2019-09-27 11:05:09 +08:00
    用的是 react 吧,那应该用 mvvm 的思维做动画.

    分成两个不同的页面(或者 block,总之是分开处理)来处理.

    test, test2, test3, test5 +test4 是一个页面,记为 page1
    test4+test8 是另一个页面,记为 page2

    page1 有它的离开动画,渐隐之类的.

    page2 有它的进入,正常,离开状态

    它的正常状态就是 test4 在左上角,test8 在中间.
    进入状态则是 page1 时,test4 所在的位置.
    那么要实现你说的动画,则只需要使进入状态过渡到正常状态即可.
    orzorzorzorz
        2
    orzorzorzorz  
    OP
       2019-09-27 11:08:00 +08:00
    @redbuck 呃,我希望是从纯设计的角度来考虑。怎么实现...我现在连咋做都没想好啊...
    orzorzorzorz
        3
    orzorzorzorz  
    OP
       2019-09-27 11:08:58 +08:00
    @redbuck 是我描述得有问题,我改下
    redbuck
        4
    redbuck  
       2019-09-27 11:12:07 +08:00
    @orzorzorzorz 哦,我以为是问实现呢

    动效的话...找 UI 商量商量,我都只管实现的...(捂脸)
    mianxiu
        5
    mianxiu  
       2019-09-27 17:01:08 +08:00   ❤️ 1
    我觉得可以分两种情况

    1. 加入离中心节点超过一定距离,按你生成的路径
    ![sitution 1.gif]( https://i.loli.net/2019/09/27/5D7sStf1kAFmXgN.gif)
    2. 少于一定距离,直接直线移动
    ![合成-1_1.gif]( https://i.loli.net/2019/09/27/eA27YDBLUgTzEq9.gif)
    orzorzorzorz
        6
    orzorzorzorz  
    OP
       2019-09-27 17:37:29 +08:00
    @mianxiu 感谢,这么一画突然就感觉高大了...求问工具
    mianxiu
        7
    mianxiu  
       2019-09-27 17:55:51 +08:00
    @orzorzorzorz after effects (我永远喜欢二乃
    mianxiu
        8
    mianxiu  
       2019-09-27 18:02:34 +08:00   ❤️ 1
    还有我觉得路径长的情况( 1 )运动时间可以慢点(我图里的太快)
    ![合成-1 ( slow.gif]( https://i.loli.net/2019/09/27/pdDyW965HtYXlsQ.gif)
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   845 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 76ms · UTC 21:43 · PVG 05:43 · LAX 14:43 · JFK 17:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.