ios不兼容Svg Wave的动画的解决方法

近日也是用上了SvgWave,十分的好看

Svg Wave - A free & beautiful gradient SVG wave Generator.

大家感兴趣的也可以了解一下

【场景】

使用SvgWave的Animate,并生成svg代码使用,windows web端、朋友的安卓移动端都能够正常执行动画,但我的ios端,波浪是一动不动的

【常规的解决方案】

直接生成gif动图引入,省事,雀食。但我的这个波浪是要用在小程序端的,gif图不知道多大,我也不想用链接引入,能在本地解决还是本地解决吧

【那怎么办】

1.我首先发现到问题的环境是在自己的手机上正在开发的小程序,因此我将代码放到web端,用ios手机访问,结果还是不行,那就可以排除是小程序的问题了。

2.寻找andriod端的朋友帮忙验证,他们那边是可以正常执行动画的,由此可以更加确定是ios端不支持这段代码的,接下来我们看一下SvgWave给我们提供的代码

<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 590" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><style>.path-0{animation:pathAnim-0 4s;animation-timing-function: linear;animation-iteration-count: infinite;}@keyframes pathAnim-0{0%{d: path("M 0,600 L 0,150 C 115.25,143.96428571428572 230.5,137.92857142857144 336,115 C 441.5,92.07142857142857 537.2500000000001,52.25 671,76 C 804.7499999999999,99.75 976.5,187.07142857142858 1111,210 C 1245.5,232.92857142857142 1342.75,191.46428571428572 1440,150 L 1440,600 L 0,600 Z");}25%{d: path("M 0,600 L 0,150 C 130.92857142857142,177.67857142857144 261.85714285714283,205.35714285714286 378,207 C 494.14285714285717,208.64285714285714 595.5,184.24999999999997 724,169 C 852.5,153.75000000000003 1008.1428571428571,147.64285714285717 1132,146 C 1255.857142857143,144.35714285714283 1347.9285714285716,147.17857142857142 1440,150 L 1440,600 L 0,600 Z");}50%{d: path("M 0,600 L 0,150 C 111.10714285714286,126.10714285714286 222.21428571428572,102.21428571428571 348,112 C 473.7857142857143,121.78571428571429 614.2500000000001,165.25 751,173 C 887.7499999999999,180.75 1020.7857142857142,152.7857142857143 1135,143 C 1249.2142857142858,133.2142857142857 1344.607142857143,141.60714285714283 1440,150 L 1440,600 L 0,600 Z");}75%{d: path("M 0,600 L 0,150 C 137.75,134.82142857142856 275.5,119.64285714285714 406,138 C 536.5,156.35714285714286 659.7499999999999,208.25 774,217 C 888.2500000000001,225.75 993.5,191.35714285714286 1103,173 C 1212.5,154.64285714285714 1326.25,152.32142857142856 1440,150 L 1440,600 L 0,600 Z");}100%{d: path("M 0,600 L 0,150 C 115.25,143.96428571428572 230.5,137.92857142857144 336,115 C 441.5,92.07142857142857 537.2500000000001,52.25 671,76 C 804.7499999999999,99.75 976.5,187.07142857142858 1111,210 C 1245.5,232.92857142857142 1342.75,191.46428571428572 1440,150 L 1440,600 L 0,600 Z");}}</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#F78DA7"></stop><stop offset="95%" stop-color="#8ED1FC"></stop></linearGradient></defs><path d="M 0,600 L 0,150 C 115.25,143.96428571428572 230.5,137.92857142857144 336,115 C 441.5,92.07142857142857 537.2500000000001,52.25 671,76 C 804.7499999999999,99.75 976.5,187.07142857142858 1111,210 C 1245.5,232.92857142857142 1342.75,191.46428571428572 1440,150 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"></path><style>.path-1{animation:pathAnim-1 4s;animation-timing-function: linear;animation-iteration-count: infinite;}@keyframes pathAnim-1{0%{d: path("M 0,600 L 0,350 C 98.85714285714286,373.7857142857143 197.71428571428572,397.57142857142856 321,384 C 444.2857142857143,370.42857142857144 591.9999999999999,319.49999999999994 708,293 C 824.0000000000001,266.50000000000006 908.2857142857142,264.42857142857144 1025,278 C 1141.7142857142858,291.57142857142856 1290.857142857143,320.7857142857143 1440,350 L 1440,600 L 0,600 Z");}25%{d: path("M 0,600 L 0,350 C 98.42857142857142,358.3928571428571 196.85714285714283,366.7857142857143 311,381 C 425.14285714285717,395.2142857142857 555,415.25 696,393 C 837,370.75 989.1428571428571,306.2142857142857 1115,292 C 1240.857142857143,277.7857142857143 1340.4285714285716,313.8928571428571 1440,350 L 1440,600 L 0,600 Z");}50%{d: path("M 0,600 L 0,350 C 89,367.1428571428571 178,384.2857142857143 310,401 C 442,417.7142857142857 617.0000000000001,434 759,417 C 900.9999999999999,400 1010,349.7142857142857 1118,333 C 1226,316.2857142857143 1333,333.1428571428571 1440,350 L 1440,600 L 0,600 Z");}75%{d: path("M 0,600 L 0,350 C 124.57142857142858,374.92857142857144 249.14285714285717,399.85714285714283 362,403 C 474.85714285714283,406.14285714285717 576,387.50000000000006 681,389 C 786,390.49999999999994 894.8571428571429,412.1428571428571 1022,409 C 1149.142857142857,405.8571428571429 1294.5714285714284,377.92857142857144 1440,350 L 1440,600 L 0,600 Z");}100%{d: path("M 0,600 L 0,350 C 98.85714285714286,373.7857142857143 197.71428571428572,397.57142857142856 321,384 C 444.2857142857143,370.42857142857144 591.9999999999999,319.49999999999994 708,293 C 824.0000000000001,266.50000000000006 908.2857142857142,264.42857142857144 1025,278 C 1141.7142857142858,291.57142857142856 1290.857142857143,320.7857142857143 1440,350 L 1440,600 L 0,600 Z");}}</style><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#F78DA7"></stop><stop offset="95%" stop-color="#8ED1FC"></stop></linearGradient></defs><path d="M 0,600 L 0,350 C 98.85714285714286,373.7857142857143 197.71428571428572,397.57142857142856 321,384 C 444.2857142857143,370.42857142857144 591.9999999999999,319.49999999999994 708,293 C 824.0000000000001,266.50000000000006 908.2857142857142,264.42857142857144 1025,278 C 1141.7142857142858,291.57142857142856 1290.857142857143,320.7857142857143 1440,350 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1" class="transition-all duration-300 ease-in-out delay-150 path-1"></path></svg>

浅浅分析一下它的原理,用animate修改path的d属性,真是被我一眼看穿啊!

3.根据上面的原理继续分析,我又四处查找资料,有人说是没加-webkit-,那雀食,我就给他通通加上,代码这里就不展示了,结果还是不行

4.于是我直接大胆推测,并且口出狂言,ios不支持animate!但是这显然是不可能的,不过既然我有这种怀疑,我不如自己验证一下,我写了一个简单的animate,-webkit-也不加,在ios端可以正常执行

5.经历了一晚上的推测,我只能给出另一种推测,ios端不支持animate中直接修改path的d值,但是window web端和Andriod都支持,好!既然如此,那么这种方法就应该被摒弃!我只能另寻出路!

【我的方案】

1.不搞了,直接放弃

2.生成gif引入

3.找找新的办法

【animate】

几经查找,找到可以直接在svg中加入该标签,控制svg的变化

参考链接:<animate> - SVG:可缩放矢量图形 | MDN (mozilla.org)

但其实我一开始找的是animateMotion和animateTransform,尝试过都不能达到我想要的效果,最后山穷水尽,尝试了animate的用法

呐呐呐,这一看就是keyframe啊,attributeName设置要修改的属性,value设置修改的值,用分号作为间隔,dur则是持续时间 ,repeatCount设置是否重复执行,还可以加上一个keyTimes="0;0.25;0.5;0.75;1",相当于关键帧,下面贴上我的部分代码供大家参考

<path d="M 0,600 L 0,150 C 67.2153110047847,177.21531100478467 134.4306220095694,204.43062200956936 237,211 C 339.5693779904306,217.56937799043064 477.4928229665072,203.4928229665072 573,205 C 668.5071770334928,206.5071770334928 721.5980861244018,223.5980861244019 820,199 C 918.4019138755982,174.4019138755981 1062.1148325358852,108.11483253588517 1173,93 C 1283.8851674641148,77.88516746411483 1361.9425837320573,113.94258373205741 1440,150 L 1440,600 L 0,600 Z" stroke="none" stroke-width="0" fill="#f58585" fill-opacity="0.53" class="transition-all duration-300 ease-in-out delay-150 path-0"><animate attributeName="d" values="M 0,600 L 0,150 C 67.2153110047847,177.21531100478467 134.4306220095694,204.43062200956936 237,211 C 339.5693779904306,217.56937799043064 477.4928229665072,203.4928229665072 573,205 C 668.5071770334928,206.5071770334928 721.5980861244018,223.5980861244019 820,199 C 918.4019138755982,174.4019138755981 1062.1148325358852,108.11483253588517 1173,93 C 1283.8851674641148,77.88516746411483 1361.9425837320573,113.94258373205741 1440,150 L 1440,600 L 0,600 Z;M 0,600 L 0,150 C 128.1531100478469,150.64114832535887 256.3062200956938,151.2822966507177 336,160 C 415.6937799043062,168.7177033492823 446.92822966507174,185.51196172248802 547,197 C 647.0717703349283,208.48803827751198 815.980861244019,214.66985645933016 917,207 C 1018.019138755981,199.33014354066984 1051.1483253588517,177.80861244019138 1127,166 C 1202.8516746411483,154.19138755980862 1321.4258373205741,152.0956937799043 1440,150 L 1440,600 L 0,600 Z;M 0,600 L 0,150 C 63.19617224880383,161.63636363636363 126.39234449760767,173.27272727272728 237,180 C 347.60765550239233,186.72727272727272 505.62679425837325,188.54545454545453 607,159 C 708.3732057416267,129.45454545454547 753.1004784688996,68.54545454545455 843,77 C 932.8995215311004,85.45454545454545 1067.9712918660287,163.27272727272728 1175,187 C 1282.0287081339713,210.72727272727272 1361.0143540669856,180.36363636363637 1440,150 L 1440,600 L 0,600 Z;M 0,600 L 0,150 C 97.70334928229664,107.34928229665071 195.40669856459328,64.69856459330143 287,83 C 378.5933014354067,101.30143540669857 464.07655502392345,180.55502392344496 561,204 C 657.9234449760766,227.44497607655504 766.287081339713,195.08133971291866 877,158 C 987.712918660287,120.91866028708134 1100.7751196172248,79.11961722488039 1195,77 C 1289.2248803827752,74.88038277511961 1364.6124401913876,112.4401913875598 1440,150 L 1440,600 L 0,600 Z;M 0,600 L 0,150 C 67.2153110047847,177.21531100478467 134.4306220095694,204.43062200956936 237,211 C 339.5693779904306,217.56937799043064 477.4928229665072,203.4928229665072 573,205 C 668.5071770334928,206.5071770334928 721.5980861244018,223.5980861244019 820,199 C 918.4019138755982,174.4019138755981 1062.1148325358852,108.11483253588517 1173,93 C 1283.8851674641148,77.88516746411483 1361.9425837320573,113.94258373205741 1440,150 L 1440,600 L 0,600 Z" dur="4s"repeatCount="indefinite" keyTimes="0;0.25;0.5;0.75;1"></animate></path>

到这里,问题就算解决了,我查了一晚上,愣是没找到相关的解决方法,这应该是全网第一个如此详细的结局方案吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/4078.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

P2DR

P2DR 是一种网络安全模型&#xff0c;代表“Policy&#xff08;策略&#xff09;- Protection&#xff08;防护&#xff09;- Detection&#xff08;检测&#xff09;- Response&#xff08;响应&#xff09;”。这个模型由信息安全专家Wheeler在1990年代提出&#xff0c;用于指…

前端CSS基础10(浮动)

前端CSS基础10&#xff08;浮动&#xff09; 浮动元素浮动后的特点浮动后的特点浮动后的影响及解决 浮动布局小练习 浮动 CSS中的浮动是一种布局技术&#xff0c;常用于实现元素的排列和定位。通过使用float属性&#xff0c;可以让元素在页面中左浮动或右浮动&#xff0c;使得…

在PostgreSQL中如何有效地批量导入大量数据,并确保数据加载过程中的性能和稳定性?

文章目录 解决方案1. 使用COPY命令2. 调整配置参数3. 禁用索引和约束4. 使用事务5. 并发导入 总结 在PostgreSQL中&#xff0c;批量导入大量数据是一个常见的需求&#xff0c;特别是在数据迁移、数据仓库填充或大数据分析等场景中。为了确保数据加载过程中的性能和稳定性&#…

Compose和Android View相互使用

文章目录 Compose和Android View相互使用在Compose中使用View概述简单控件复杂控件嵌入XML布局 在View中使用Compose概述在Activity中使用Compose在Fragment中使用Compose布局使用多个ComposeView 在布局中使用Compose 组合使用 Compose和Android View相互使用 在Compose中使用…

AIGC - SD(中英文本生成图片) + PaddleHub/HuggingFace + stable-diffusion-webui

功能 stable-diffusion(文本生成图片)webui-win搭建&#xff08;开启api界面汉化&#xff09;PaddleHubHuggingFace: SD2&#xff0c;中文-alibaba/EasyNLP stable-diffusion-webui 下载与安装 环境相关下载 python&#xff08;文档推荐&#xff1a;Install Python 3.10.6 …

linux开发板开机启动向日葵

硬件&#xff1a;orangepi 5 pro 操作系统&#xff1a;ubuntu 20.4 lts 安装向日葵 根据我的实测&#xff0c;arm架构的ubuntu系统只能安装向日葵提供的麒麟系统的那个版本&#xff0c;具体安装方式官网下载页面有 允许任意用户连接到 X11 使用root用户登录后打开终端输入一下…

Windows python3.10安装psbody

Windows环境下安装psbody 下载mesh GitHub - MPI-IS/mesh: MPI-IS Mesh Processing Library 下载安装boost Boost Downloads 解压到 D:\software\boost_1_85_0&#xff0c;这个路径后面要设置为环境变量 BOOST_ROOT 的值。 添加 BOOST_ROOT 环境变量 您可以通过图形界面配…

php的curl请求,包含了post,get,put,delete

php的curl请求,包含了post,get,put,delete 这段代码是一个非常实用的HTTP通信工具&#xff0c;可以轻松集成到需要网络通信的PHP项目中。它提供了足够的灵活性&#xff0c;适合多种网络请求任务。 if (!function_exists("http_curl")) {/*** 发送HTTP请求* param s…

react函数组件传值(父子/子父/兄弟)

父子组件传值 子父组件传值 兄弟组件传值 注&#xff1a;本人前端小白 &#xff0c;如有不对的地方还请多多指教

knife4j swagger 使用笔记

1.接口访问的端口跟后台设置的不一致&#xff0c;接口请求无反应 处理办法 2.响应参数不显示问题 &#xff08;1&#xff09;返回的参数里面一定要有响应的参数对象&#xff0c;如下&#xff1a; &#xff08;2&#xff09;TableDataInfo 定义成泛型类 TableDataInfo package…

ros2 node 之间的通信方式之 —— Topic通信案例

文章目录 ros2 node 之间的通信方式之 Topic通信Topic 通信案例1、创建工作空间2、创建功能包3、编写发布者和订阅者代码3.1 topic_helloworld_pub.cpp3.2 topic_helloworld_sub.cpp 4、编写CMakeLists.txt5、编译工作空间下的功能包6、运行结果 ros2 node 之间的通信方式之 To…

AutoGPT-Forge使用教程,自行构建agent智能体

本博客给出AutoGPT-forge四个教程的翻译与理解&#xff0c;使用GPT4翻译&#xff0c; 参考官方教程https://aiedge.medium.com/autogpt-forge-a-comprehensive-guide-to-your-first-steps-a1dfdf46e3b4 使用AutoGPT Github代码日期2024/4/22&#xff1b; 博客开始编辑日期20…

C语言项目实战——扫雷

目录 1.前言 2.完整流程 2.1规划书 2.2代码部分 2.2.1文件的结构设计 2.2.2变量的创建 2.2.3菜单的基本实现 2.2.4初始化期棋盘 2.2.5输出完整棋盘 2.2.6埋雷的实现 2.2.7查询周围雷的数量 2.2.8扫雷的实现 2.2.9完整代码 3.总结 1.前言 哈喽大家好吖&#xff0c;今…

深入了解数据结构中的查找算法

目录 前言 1. 查找的基本概念 2. 顺序查找和折半查找 2.1 顺序查找 2.2 折半查找 2.3分块查找 3. 树形查找 3.1 二叉搜索树 (BST) 3.2平衡二叉树 3.3红黑树 4. B 树和 B 树 4.1 B 树 4.2 B 树 5. 哈希表 (Hash Table) 5.1 基本操作 5.2 实现 5.3 复杂性分析 5…

# IntelliJ IDEA 中 springboot 启动类 SpringApplication.run 报红分析

IntelliJ IDEA 中 springboot 启动类 SpringApplication.run 报红分析 一、原因分析&#xff1a;通常 SpringApplication.run 报红&#xff0c;可能是由以下几种原因造成的&#xff1a; 1、项目的主配置文件中 pom.xml 可能没有导入相关依赖。 2、方法参数错误&#xff1a;S…

全量知识系统 程序详细设计 库模式的存储库模型: “三生”(派生衍生自生) (QA SmartChat)

Q1. 请仔细说说 派生和衍生 各自的意思以及关系 派生和衍生是两个近义词&#xff0c;但在语境不同的情况下有着不同的含义。 派生通常指从某种事物或概念中产生出新的东西或概念。它可以用来表示从一个基本的概念或原始的实体中推导或演化出来的新的思想、理论、产品或方法。…

【C++例】虚函数—代码实例

1.虚函数的动态绑定 //虚函数&#xff08;非静态的成员函数&#xff09; //动态绑定&#xff1a;只有通过基类的指针或引用调用虚函数时 #include<iostream> using namespace std; class Base1 { public:virtual void display() const; }; // 如果把某个函数指定为final…

通用型自定义拼接 SQL 脚本,摆脱重复工作量

通用型自定义拼接sql脚本,摆脱重复工作量 在开发 Restful 接口时&#xff0c;我们经常需要根据前端传递的参数动态拼接 SQL 查询语句&#xff0c;以满足不同的查询需求。本文将介绍一个通用的自定义拼接 SQL 脚本的方法&#xff0c;帮助开发人员减少重复工作量。 首先&#x…

【C++打怪之路Lv3】-- 类和对象(上)

&#x1f308; 个人主页&#xff1a;白子寰 &#x1f525; 分类专栏&#xff1a;C打怪之路&#xff0c;python从入门到精通&#xff0c;数据结构&#xff0c;C语言&#xff0c;C语言题集&#x1f448; 希望得到您的订阅和支持~ &#x1f4a1; 坚持创作博文(平均质量分82)&#…

避坑:我找到了Hexo安知鱼的音乐馆配置(目前好像还没有教程)

我发现安知鱼的音乐配置根本就找不到说明就无奈自己逆向了一下&#xff0c;找到了配置文件&#xff0c;写在博客里记录一下也算是给大家避坑 我的版本是1.6.12&#xff0c;如果你和我的不一样可以看后面 配置文件就是Blog\themes\anzhiyu\source\js\utils.js 打开该文件&…