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

最新推荐文章于 2023-06-16 21:31:05 发布
最新推荐文章于 2023-06-16 21:31:05 发布
阅读量988 收藏
点赞数
分类专栏： 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
关注
专栏目录
做一个绕Y轴旋转的动画时遇到问题
likandmydeer的专栏
11-10 3184
这是我做的一个Demo，红色方块与蓝色矩形的super view都是self.view，当红色方块做绕Y轴旋转动画时，只看到一半的红色方形在旋转。- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. /
android 重叠gallery 3D效果实现
成长的味道
09-19 3747
在看了iOS上面的CoverFlow后，感觉效果真的不错，就想在android上面实现一个，这个程序在网上参考了一此核心的代码，当然我添加了一些其他的东西，废话不多说，先看效果，不然就是无图无真相。 Demo下载地址：GalleryFlow 其实实现这个效果很简单，下面作一个简单的介绍 一，创建倒影效果 这个基本思路是： 1，创建一个源
IOS 简单的动画自定义方法（旋转、移动、闪烁等）
张明炜
08-08 352
#define kDegreesToRadian(x) (M_PI * (x) / 180.0)   #define kRadianToDegrees(radian) (radian*180.0)/(M_PI)   - (void)viewDidLoad {     [superviewDidLoad];     self.title = @"测试动画";     self.vi...
iOS 旋转动画
hanlinbin521的博客
08-06 546
UIImageView * _loadingView = [[UIImageView alloc]initWithFrame:CGRectMake(80, 300, 50, 50)];         _loadingView.image = [UIImage imageNamed:@"facial_features_green"];         [self.view addSu
2023高薪前端面试题（一、前端基础——css）
iaz999的博客
04-28 1463
Flex如果动画只是简单的状态切换，不需要中间过程控制，在这种情况下，css动画是优选方案。如果你在设计很复杂的富客户端界面或者在开发一个有着复杂UI状态的 APP。那么你应该使用js动画，这样你的动画可以保持高效，并且你的工作流也更可控。js动画与css3动画的区别_js逐帧动画_Sco_Jing1031的博客-CSDN博客。
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4755
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
前端面试题---html/css
weixin_44501366的博客
10-07 1235
!DOCTYPE 标签：head：body:base:可以用来统一设置当前页面上的超链接的跳转方式< base >标签为页面上的所有链接规定默认地址或默认目标使用了 < base > 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。 使用< base >标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 < a >、< img >、< li
前端基础总结--CSS
chenyouleww的博客
07-08 579
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
iOS旋转动画
03-16
一个简单旋转动画，支持旋转，缩小，放大等功能。
结合来做动画同时解决多个动画顺序执行的问题 iOS
04-06
作者Cloudox，源码OXHanoiDemo，汉诺塔问题本身不难，主要是结合来做动画同时解决多个动画顺序执行的问题。利用分线程来做算法逻辑，主线程跑动画，动画比较耗时，所以算法逻辑需要等待，否则会出现多个动画一起动的情况。解决这个问题的方法是使用dispatch_semaphore_t信号量来控制等待，直到遇到动画的时候等待，动画完成后再继续跑算法，这个方法只有在算法处于分线程时可以做到，否则会阻塞动画的执行。将塔做了对象抽象出来，将其坐标、已经堆放的盘子个数作为其属性，这样代码结构会更加清晰简单。
iOS渐变圆环旋转动画CAShapeLayer CAGradientLayer
09-01
主要介绍了iOS渐变圆环旋转动画CAShapeLayerCAGradientLayer的相关资料,需要的朋友可以参考下
 IOS核心动画-旋转Demo
05-02
iOS的核心动画，很简单的实现了图片的循环旋转，跟风车一样，实现了循环滚动的效果。
IOS 基本动画（旋转、移动、闪烁、缩放等）
04-27
IOS 基本动画（旋转、移动、闪烁、缩放等）
iOS --旋转动画
ddlfdr71199的博客
04-21 104
/** * 利用图片的layer添加到转盘上 * */ //指针的锚点 相对于自身，左上角为(0,0)，右下角为(1,1) self.zhen.layer.anchorPoint = CGPointMake(0.5,1); NSLog(@"%@",NSStringFromCGPoint(self.zhen.l...
iOS实现旋转动画
最新发布
liubo的博客
06-16 1053
【代码】iOS实现旋转动画。
iOS开发 CAAnimation做旋转动画
weixin_46926959的博客
03-03 534
CAAnimation旋转动画
自定义Android 3D旋转动画实现详解
完成3D旋转动画的创建后，我们需要在Activity中使用这个动画类。通常，我们可以将两个大小相同的ImageView放置在一个FrameLayout中，让它们重叠。当动画开始时，对其中一个ImageView应用旋转动画，动画结束后，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值