专栏首页每日一篇技术文章SceneKit - 提供两种最常用的将序列帧动画渲染到模型上的方式

SceneKit - 提供两种最常用的将序列帧动画渲染到模型上的方式

本节学习目标

提供两种将序列帧动画渲染到模型上的方式

准备一组动画图片跟着教程一起做

image.png

第一种方式 - 使用行为动画(SCNAction)

    // 第一步 - 创建动画组
    var images :[UIImage] = []
    for i in 1...10 {
       let name = "\(i).tiff"
       images.append(UIImage(named:name)!)
    }
    
    // 第二步  给模型节点添加行为动画
    var count = 0
    let action = SCNAction.customAction(duration: 0.1) { (node, progress) in
       print(progress)
        if progress >= 0.1 {
           count += 1
           node.geometry?.firstMaterial?.diffuse.contents = images[count%9]
        }
    }
   // 让行为持续 长一点 就能实现连贯的动画
    planeNode.runAction( SCNAction.repeat(action, count: 1000))

tip:为什么 要设置 progress >= 0.1 而不是 = ,0.1代表我们行为持续的时间,看下面的日志

0.00141505610443735
0.0180852222157303
0.0347495143823253
0.0513938077001841
0.0681048463002569
0.084751595329517
0.100000001490116 // 是一个> 0.1 的值有误差范围

第二种方式 - 将uiimageview 渲染到模型上

    // 第一步 创建持有动画的imageView
    let imageView = UIImageView()
    imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
    var images :[UIImage] = []
    for i in 1...10 {
     let name = "\(i).tiff"
     images.append(UIImage(named:name)!)
    }
    imageView.animationImages = images
    imageView.animationDuration = 1
    imageView.animationRepeatCount = -1
    imageView.startAnimating()
    // 第二步 渲染imageView 到模型上去
    planeNode.geometry?.firstMaterial?.diffuse.contents = imageView

这个时候,你运行程序是没有动画效果的,因为模型是静止的,scenekit 不会对静止的模型实时渲染,这个时候要让模型渲染imageview 有两种办法,第一种就是让模型小幅度运动,但让用户察觉不到,另外一种方式如下

  scnView.isPlaying = true

这个时候运行程序 序列帧动画已经开始执行了 效果如下

gif6.gif

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SceneKit_入门13_骨骼动画

    1.创建工程(略) 2.加载场景文件(略) 3.添加框架SceneKit/Scenekit.h 4.创建场景资源对象

    酷走天涯
  • 带你入坑01-weex-搭建环境

    安装 Node.js 环境成功后,npm 包管理工具也会自动安装成功 输入下面命令检查一下

    酷走天涯
  • sceneKit-clone很有用

    从这个方法的名字我们知道它就是在克隆对象,什么是克隆?就是复制一个一模一样的东西出来,计算机中的克隆,其实是创建一个新的内存空间,将一对象占用的内存数据全部复制...

    酷走天涯
  • Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果

    AnimatedDefaultTextStyle通过动画过渡的方式来切换文本的显示样式,如下图所示效果,当点击切换样式按钮时,显示的文本样式会以动画过渡的方式来...

    早起的年轻人
  • WPF效果第一百二十九篇之展开动画

    2020年初,一场突如其来的疫情,打乱了全中国人的节奏;一场关系到每个人生命健康的疫情防控战在各地打响,这场没有硝烟的“战役”牵动着无数国人的心;大家还是少出门...

    WPF程序员
  • 【追问杀人机器人】深度解析美警方改造拆弹机器人炸死嫌犯

    【新智元导读】美国时间周五凌晨,达拉斯市警方在拆弹机器人上安装炸药,远程操控该机器人行至一名嫌疑犯躲藏地点并引爆炸弹,嫌犯当场死亡。该事件引发各方激烈争论。我们...

    新智元
  • DB2 Vs MySQL系列 | 体系架构对比

    前些日子,我们做了DB2 VS MySQL的数据类型的对比,今天我们将体系架构的对比分享给大家,让大家对这两类数据库有更深刻的认识。 ? DB2体系结构 ? ?...

    数据和云
  • 动画分析步骤“三步曲”

    首先先来看看动画设计中的三个角色:产品设计师、算法分析师以及伟大的程序员都有哪些职责。

    博文视点Broadview
  • 五个小技巧告诉你如何保护MySQL数据仓库

    汇总各种来源的数据,可以创建一个中央仓库。通过分析和汇总业务数据报告,数据仓库能够帮助企业做出明智、战略性的决策分析。虽然数据仓库提供了许多便利,但是把这些敏感...

    CSDN技术头条
  • 基于物联网的移动应用对增强用户体验有何影响

    What-Impact-Do-IoT-Based-Mobile-Apps-Have-In-Enhancing-User-Experience-1068x656-...

    用户4122690

扫码关注云+社区

领取腾讯云代金券