角度材料设计动画

Posted 2023-03-06

【中文标题】角度材料设计动画

【英文标题】：Angular Material Design Animation

【发布时间】：2015-07-28 16:31:54

【问题描述】：

我目前正在使用 AngularJS、ngAnimate、Angular-Material 和 UI-Router 开发一个移动 Web 应用程序。我正在遵循 UI/UX 部分的 Google Material Design 规范。

我想以“Angular 方式”为状态更改设置动画，尤其是 'Parent to child' animation

我不知道如何实现这种“提升和展开”动画。

感谢您的帮助！

【参考方案1】：

我猜你必须自己做。

Angular-material 不是复制 Material Design 动画准则的魔杖。 Material Design 指南只是简单的指南，而且对于 Google 的 android 应用（无论是否在内部）来说，都足够宽松以致于被黑客攻击或严格遵守。 我的感觉是 Angular Material 团队已经像疯子一样努力将这个很棒的工具带到 1.0，并将利用new routing system in Angular 2 提供一些动画，比如你希望开箱即用的动画。 但至少目前是the bleeding edge of the bleeding edge。 好消息似乎是路线将有自己的视口和同级视口。

AngularJS 在某种程度上开始接受 Polymer 的 Web 组件概念。 滚动到“向我展示魔法！” on this page 和 check these demos。 Polymer 的生态系统提供了大量的already-made components to build your app with。它很大，让你想知道为什么 Polymer 没有得到the same momentum as AngularJS。但我离题了...

选项 1

创建一个自定义函数，该函数会在被单击/点击的列表元素上触发，以放置在您的控制器（或指令）中。

一旦用户点击/点击列表元素，它就会触发该功能（控制台测试）。

函数应该：

检索被点击/点击的项目的ID（将其传递给函数） animate ：您有多种选择，但这里有一个：使用ui-router absolute named view (@view_name)，并将其包装在一个带有overflow:hidden 的div 容器中，该容器的初始尺寸对应于列表项的尺寸。 检测被点击的列表元素的 xy 位置（an example，假设您使用 AngularJS 和 jQuery），并将其传递给“项目详细信息”路由（见上文），因此矩形随着原点增长完全对应于 UI 是点击/点击的那一刻。视频中显示的动画看起来相当复杂：当点击底部的项目时，“项目详细信息页面”底部会变慢，而顶部会变快。

为什么是绝对命名的视图？因为它允许使用 z-indexing 使列表保持在“项目详细信息”视图下方，所以当用户关闭/离开它时，您可以回滚动画，并且矩形将收缩回精确的尺寸和列表项的位置。最后，转换 opacity:0 并离开路线。

选项 2

这是拉伸/滚动离子项目的技术的粗略模型。它需要检测项目的 y 位置，并使用ionicScrollDelegate 滚动到它。此外，您会冻结主滚动条，以便用户“卡住”，直到他关闭“详细视图”，然后释放滚动条。

    $scope.toggleStretchedMode = function(itemID) 

    $scope.stretched = $scope.stretched === false ? true: false;


    if(!$scope.stretched)
        $('ion-item').removeClass('stretched');
        $ionicScrollDelegate.freezeAllScrolls(false);
    
      else
    
        $location.hash(itemID);
        $ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
        $ionicScrollDelegate.freezeAllScrolls(true);
        $('#'+itemID).addClass('stretched');
     ;

  

一个非常基本的JSFiddle，需要细化（点击的项目应该滚动到屏幕中间，然后展开）。

请注意，JSFiddle 只会阻止鼠标滚轮滚动。如果似乎阻止了第一次滑动，但随后 ng-click 将其释放，因此它远非完美。您不仅应该阻止列表滚动，还应该阻止上下滑动事件。

它也初始化不好，只能第二次工作。但这个概念可能是这样的。

【讨论】：

感谢您的回答！如果我错了，请纠正我，但您建议我使用 JS/jQuery 执行动画？我相信使用 CSS 动画/过渡是可能的。

只是为了概念。基本上你只需要检测对象的 x 和 y 坐标。或者更简单：你拦截点击，然后将点击的列表项转换为 100vh，并进行转换。

这也很有趣：rich-harris.co.uk/ramjet - 唯一的问题是，现在考虑一个 div 并不容易，它会变成另一个，因为我们必须填充这个动画完成后，带有一些数据的最后状态。并且还有一些触发状态的机制，而不改变路由。我们正在处理当今 html5 页面的挑战之一：在保留转换状态和应用上下文的同时转换内容。