ios多个animation动画执行使用rotateY旋转重叠问题

于 2022-07-01 17:30:06 发布
阅读量970 收藏
点赞数
分类专栏： h5混合应用开发 文章标签： ios 动画
本文链接：https://blog.csdn.net/sufubo/article/details/125561249
版权

问题背景

在ios上面，做了两个动画，都是使用animation，一个动画盖在另外一个动画上面，然后把下面的动画一直在旋转，上面的绕Y轴旋转，在ios上面就会有一半的动画卡进去，可以看下这个效果
在这里插入图片描述

这是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            z-index: 14;
            top: 50%;
            left: 50%;
            width: rem(560);
            transform: translateX(-50%) translateY(-50%) translateZ(1px);
            background-size: 100% 100%;
            animation-name: test-card;
            animation-delay: 1s;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: 0.99;
            animation-fill-mode: forwards;
        }
        .test-end {
            position: absolute;
            z-index: 1;
            top: 50vh;
            left: 50vw;
            transform: translateX(-50%) translateY(-50%);
            animation-name: testEnd;
            animation-delay: 1s;
            animation-duration: 18s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
        }
        @keyframes testEnd {
            0% {
                transform: translateX(-50%) translateY(-50%) scale(1.2) rotateZ(0);
            }

            100% {
                transform: translateX(-50%) translateY(-50%) scale(1.2) rotateZ(360deg);
            }
        }

        @keyframes test-card {
            0% {
                transform: translateX(-50%) translateY(-50%) scale(0) rotateY(180deg) rotateZ(0deg);
            }

            30% {
                transform: translateX(-50%) translateY(-50%) scale(0.2) rotateY(180deg) rotateZ(360deg);
            }

            50% {
                transform: translateX(-50%) translateY(-50%) scale(0.5) rotateY(180deg) rotateZ(360deg);
            }

            100% {
                transform: translateX(-50%) translateY(-50%) scale(1.3) rotateY(360deg) rotateZ(360deg);
            }
        }
        .test-img {
            width: 100vw;
        }
    </style>
</head>
<body>
    <div class="test-end">test-endtest-endtest-endfdsafsda
        <img  class="test-img" src="https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF" />
    </div>
    <div class="test-card">test-cardtest-cardtest-cardfafsdafsda
        <img class="test-img" src="https://t7.baidu.com/it/u=737555197,308540855&fm=193&f=GIF" alt="">
    </div>
    <select></select>
    <script></script>
</body>
</html>

解决方案

试了z-index的值发现不管用，z-index改的再大也会也会卡出问题。因为设置了transform之后，z-index的会生效。具体原因是因为：给元素设置transform属性会创建一个新的stacking context。生成了一个新的层叠上下文。
所以两个的z-index都是相对于现在的这个层级，无论设置为多大，其实就是新的层级里面自己比较。所以没有生效。

方案1

解决方案就是给他们各包一个父元素没有transform的，这样再使用z-index，定位让他们形成不同的层级，这样他们内部在使用transform形成新的层级，也只是内部再形成了。
解决之后的效果
在这里插入图片描述

解决之后的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: fixed;
            z-index: 1400;
            top: 50%;
            left: 50%;
            width: rem(560);
            transform: translateX(-50%) translateY(-50%) translateZ(1px);
            background-size: 100% 100%;
            animation-name: test-card;
            animation-delay: 1s;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: 0.99;
            animation-fill-mode: forwards;
        }
        .test-end {
            position: absolute;
            z-index: 1;
            top: 50vh;
            left: 50vw;
            transform: translateX(-50%) translateY(-50%);
            animation-name: testEnd;
            animation-delay: 1s;
            animation-duration: 18s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
        }
        @keyframes testEnd {
            0% {
                transform: translateX(-50%) translateY(-50%) scale(1.2) rotateZ(0);
            }

            100% {
                transform: translateX(-50%) translateY(-50%) scale(1.2) rotateZ(360deg);
            }
        }

        @keyframes test-card {
            0% {
                transform: translateX(-50%) translateY(-50%) scale(0) rotateY(180deg) rotateZ(0deg);
            }

            30% {
                transform: translateX(-50%) translateY(-50%) scale(0.2) rotateY(180deg) rotateZ(360deg);
            }

            50% {
                transform: translateX(-50%) translateY(-50%) scale(0.5) rotateY(180deg) rotateZ(360deg);
            }

            100% {
                transform: translateX(-50%) translateY(-50%) scale(1.3) rotateY(360deg) rotateZ(360deg);
            }
        }
        .test-img {
            width: 100vw;
        }
        .parent-low {
            position: relative;
            z-index: 1;
        }
        .parent {
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="parent-low">
        <div class="test-end">test-endtest-endtest-endfdsafsda
            <img  class="test-img" src="https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF" />
        </div>
    </div>
    <div class="parent">
        <div class="test-card">test-cardtest-cardtest-cardfafsdafsda
            <img class="test-img" src="https://t7.baidu.com/it/u=737555197,308540855&fm=193&f=GIF" alt="">
        </div>
    </div>
    <select></select>
    <script></script>
</body>
</html>

方案二

把想要设置的上层元素的translateZ值设置大一点，也可以解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: fixed;
            z-index: 1400;
            top: 50%;
            left: 50%;
            width: rem(560);
            transform: translateX(-50%) translateY(-50%) translateZ(1000px);
            background-size: 100% 100%;
            animation-name: test-card;
            animation-delay: 1s;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: 0.99;
            animation-fill-mode: forwards;
        }
        .test-end {
            position: absolute;
            z-index: 1;
            top: 50vh;
            left: 50vw;
            transform: translateX(-50%) translateY(-50%);
            animation-name: testEnd;
            animation-delay: 1s;
            animation-duration: 18s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
        }
        @keyframes testEnd {
            0% {
                transform: translateX(-50%) translateY(-50%) scale(1.2) rotateZ(0);
            }

            100% {
                transform: translateX(-50%) translateY(-50%) scale(1.2) rotateZ(360deg);
            }
        }

        @keyframes test-card {
            0% {
                transform: translateX(-50%) translateY(-50%) translateZ(1000px) scale(0) rotateY(180deg);
            }

            30% {
                transform: translateX(-50%) translateY(-50%) translateZ(1000px) rotateY(180deg);
            }

            50% {
                transform: translateX(-50%) translateY(-50%) translateZ(1000px) rotateY(180deg);
            }

            100% {
                transform: translateX(-50%) translateY(-50%) translateZ(1000px) rotateY(360deg);
            }
        }
        .test-img {
            width: 100vw;
        }
        .parent-low {
            position: relative;
            z-index: 1;
        }
        .parent {
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="test-end">test-endtest-endtest-endfdsafsda
        <img  class="test-img" src="https://t7.baidu.com/it/u=91673060,7145840&fm=193&f=GIF" />
    </div>
    <div class="test-card">test-cardtest-cardtest-cardfafsdafsda
        <img class="test-img" src="https://t7.baidu.com/it/u=737555197,308540855&fm=193&f=GIF" alt="">
    </div>
    <select></select>
    <script></script>
</body>
</html>
vieber
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS实现旋转动画
liubo的博客
06-16 979
【代码】iOS实现旋转动画。
iOS开发 CAAnimation做旋转动画
weixin_46926959的博客
03-03 502
CAAnimation旋转动画
iOS中控件旋转：绕x,y,z轴
iosWorker的博客
01-21 1万+
1，绕x,y,z轴旋转一样，只是改变下参数，下面会说明 方法一：旋转时过渡平滑 CABasicAnimation* rotationAnimation; //绕哪个轴，那么就改成什么：这里是绕y轴 ---> transform.rotation.y rotationAnimation = [CABasicAnimation animationWithKeyPat
 IOS核心动画-旋转Demo
05-02
iOS的核心动画，很简单的实现了图片的循环旋转，跟风车一样，实现了循环滚动的效果。
iOS开发（OC）——绕圆心旋转效果
菜鸟历程
12-29 5194
一、 CAKeyframeAnimation *path=[CAKeyframeAnimation animationWithKeyPath:@"position"]; //矩形的中心就是圆心 CGRect rect=CGRectMake(10, 20, 400, 300); path.duration=5; //绕此圆中心转 path.path=CFAu
jquery多个图标组成3D旋转效果特效代码
03-20
通过以上步骤，你可以创建一个使用jQuery和CSS3实现的3D旋转图标效果。这个特效不仅可以用于展示产品特性，也可以作为导航菜单、按钮组等，为网页增加动态感和趣味性。在实际应用中，可以根据具体需求调整图标数量、...
使用animation实现魔方动画
12-31
当然，实际的魔方动画会更复杂，需要处理多个面的同时旋转，以及更精细的控制旋转角度和动画速度。你可以根据需求进一步扩展这个基础模型，例如添加交互功能，让用户点击按钮来控制魔方的旋转方向和速度。 通过这个...
3D立方体旋转展示动画特效源码.rar
01-27
综上所述，"3D立方体旋转展示动画特效源码"涵盖了从基础的3D概念到具体的编程实践多个方面的知识，对学习和提升3D动画开发技能非常有帮助。通过研究源码，可以深入理解3D渲染、动画控制以及Web交互设计的技巧。
纯CSS3正多面体旋转动画特效
06-24
在本文中，我们将深入探讨如何使用CSS3来创建一个纯正多面体旋转动画特效，这个特效是由锥形的二十面3D旋转等边三角形构成的。首先，我们需要了解CSS3的一些基本概念和特性，然后我们将逐步解析实现这样一个动画特效...
jQuery Animation实现CSS3动画示例介绍
10-27
例如，下面的代码示例展示了如何使用`animate()`方法和`step`参数来实现一个旋转动画： ```javascript <div id="box"></div> #box { width: 100px; height: 100px; position: absolute; top: 100px; left: ...
iOS CoreAnimation专题——实战篇（四）基于拖动手势的视图3D旋转效果
DH's Den
05-14 2868
二维图像的显示 矩阵变换 基向量 线性变换 线性变换的复合 平移变换 齐次坐标 齐次坐标下的点和向量的区别 齐次坐标下的平移变换 齐次坐标下的平行线相交问题 CATransform3D 基于CATransform3D的变换矩阵 3D旋转变换 带透视效果的CATransform3D旋转 基于Pan手势的3D旋转控制 总体实现思路 通过向量计算当前手指的移动方向 总结 今...
IOS9开始如何处理转屏
幸福官的博客
12-17 9842
【问题】 使用IOS9之前的SDK，转屏会有几个函数会被响应。 1.转屏前回调函数 - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration NS_DEPRECATED_IOS
iOS横竖屏旋转及其基本适配方法
热门推荐
梧雨北辰的博客
01-11 2万+
前段时间抽空总结了一下iOS视频播放的基本用法，发现这其中还有一个我们无法绕过的问题，那就是播放界面的旋转与适配。的确，视频播放与游戏类型的App经常会遇到这个的问题。由于至今接手的项目中不常涉及这块知识疏于总结，在搜索了一些资料后也发现都很散乱，所以决定在这里重新整理一下。 目录 一、最让人纠结的三种枚举 二、两种屏幕旋转的触发方式 三、屏幕旋转控制的优先级 四、开启屏幕旋转的全局
rotate3d使用
weixin_33752045的博客
03-26 7983
rotate3d函数使用3D引擎对元素进行旋转。ratate3d函数具有4个参数，均不许省略。 rotate3d(x,y,z,angle)为标准语法，其中（x,y,z）为坐标，angle旋转角度。整个函数含义是： 以坐标原点（根据transform-origin设定，默认为（0，0，0））为起始点，以（x,y,z）为终点的向量为轴，根据左手定则，选择angle角度。 注：（以笔记本开合90...
ios实现屏幕旋转的方法
weixin_30500473的博客
12-16 283
1、屏蔽AppDelegate下面的屏幕旋转方法 #pragma mark - 屏幕旋转的 //- (UIInterfaceOrientationMask)application:(UIApplication*)application supportedInterfaceOrientationsForWindow:(UIWindow*)window //{ // return U...
Android动画
达帮主
04-22 697
Android 常用动画之RotateAnimation前两天接到任务做一个UI，有用到动画，于是抽空看了下Android动画相关知识。Android Animation共有四大类型，分别是Alpha 透明度动画Scale 大小伸缩动画Translate 位移动画Rotate 旋转动画这四类动画按模式又可分为：tweened animation(渐变动画) —— alp...
CSS3的动画及3D转换（animation、transform、rotate3d 、perspective等）【总结】
huangfuyk.的博客
07-01 2712
目录1. 动画① 创建② 属性③ 关键帧2. 3D① transform转换② rotate3d③ translate3d④ perspective⑤ transform-style 1. 动画 ① 创建 @keyframes // 创建动画 语法： @keyframes animationname {keyframes-selector {css-styles;}} keyframes-selector // 动画持续时间的百分比 例： @keyframes myMove{ 0% {to
iOS 先后执行一组动画源代码
我的脚步
04-20 1171
今天看到一个能顺序执行一组Animation的第三方代码，挺简单的，分享粗来.h 文件@interface BRYSerialAnimationQueue : NSObject- (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)
CSS transform的rotate，内部元素旋转到背后仍会显示。
cithegod的博客
11-09 6941
在写代码的时候出现了一个问题，当使用了CSS3的transform的时候，对下面这个元素进行旋转：//DOM元素的结构 <figure class="img-figure"> <img src="/assets/97aa04cee801bdd3b8762057267d0767.jpg" alt="This is a beauty"> <figcaption> <h2
移动端 退拽 rotateY旋转
最新发布
05-27
要在移动端实现拖拽和rotateY旋转效果，你可以使用JavaScript的touch事件和CSS3的transform属性来实现。 首先，在HTML中创建一个可拖动的元素，比如一个图片或者一个div。然后，使用JavaScript的touchstart、touchmove和touchend事件来设置拖动时的数据和样式。接着，使用CSS3的transform属性来实现旋转效果。 下面是一个示例代码，可以让你更好地理解实现方式： HTML代码： ```html <div id="drag"></div> ``` CSS代码： ```css #drag { width: 100px; height: 100px; background-color: red; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotateY(0deg); transition: transform 0.3s ease-out; } ``` JavaScript代码： ```javascript var dragItem = document.getElementById("drag"); var startX = 0; var startY = 0; var currentX = 0; var currentY = 0; var rotateAngle = 0; // 设置拖动时的数据和样式 dragItem.addEventListener("touchstart", function(event) { event.preventDefault(); startX = event.touches[0].clientX; startY = event.touches[0].clientY; currentX = startX; currentY = startY; dragItem.style.transform = "translate(-50%, -50%) rotateY(" + rotateAngle + "deg)"; }); dragItem.addEventListener("touchmove", function(event) { event.preventDefault(); currentX = event.touches[0].clientX; currentY = event.touches[0].clientY; var deltaX = currentX - startX; var deltaY = currentY - startY; var rotateRatio = deltaX / window.innerWidth; rotateAngle = rotateRatio * 180; dragItem.style.transform = "translate(-50%, -50%) rotateY(" + rotateAngle + "deg)"; }); dragItem.addEventListener("touchend", function(event) { event.preventDefault(); dragItem.style.transform = "translate(-50%, -50%) rotateY(0deg)"; }); ``` 在上面的代码中，我们首先获取了一个可拖动的元素，并为它设置了touchstart、touchmove和touchend事件，用于设置拖动时的数据和样式。然后，在touchmove事件中，我们计算了手指在屏幕上的移动距离，并根据移动距离计算出旋转的角度。最后，在touchend事件中，我们将元素的旋转角度重置为0。 当然，这只是一个简单的示例，你可以根据自己的需求进行更复杂的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值