marvr_ios
论坛版主
论坛版主
  • UID3513
  • 粉丝11
  • 关注1
  • 发帖数144
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:1098回复:0

NVisionXR_iOS教程七 —— 场景中物体运动

楼主#
更多 发布于:2018-04-02 12:27
本章节教大家如何让立方体按照自己想要的轨迹运动。
添加头文件#import''NVAnimationEffect.h'',在onCreate方法中实例该动画类,代码如下图:
1、立方体移动

图片:WechatIMG185.jpg


代码:
    /**
     * 构建一个NVAnimationEffect对象
     * name 可以随便取,但是要唯一
     * context 传入场景即可
     * widget 作用的NVWidget对象,本例传入的是立方体
     * duration 运动的总时长
     */
    NVAnimationEffect *move = [[NVAnimationEffect alloc] initWithAnimation:@"moveAni" Context:self Widget:cube Duration:4.0];
    
    // 设置关键帧
    // 在4秒内从(0,0,0)的位置线形的移动到(0,10,0)的位置
    [move createKeyFrameWithTimePos:0 Pos:NVPosition(0.0, 0.0, 0.0) Type:TRANSLATE];
    [move createKeyFrameWithTimePos:4 Pos:NVPosition(0.0, 10.0, 0.0) Type:TRANSLATE];    
    // 是否循环播放动画
    [move setLoop:YES];
  
    // 将动画对象添加到场景中
    [self addAnimEffect:move];
 
    // 开始执行运动
    [move start];

2、立方体边移动边缩放

图片:WechatIMG186.jpg


代码:
    // 设置关键帧
    // 在4秒内从(0,0,0)的位置线形的移动到(0,10,0)的位置
    [move createKeyFrameWithTimePos:0 Pos:NVPosition(0.0, 0.0, 0.0) Type:TRANSLATE];
    [move createKeyFrameWithTimePos:4 Pos:NVPosition(0.0, 10.0, 0.0) Type:TRANSLATE];
    
    // 新开一个运动轨道,在4秒内从1倍放大到5倍
    [move createKeyFrameWithTimePos:0 Pos:NVPosition(1.0, 1.0, 1.0) Type:SCALE];
    [move createKeyFrameWithTimePos:4 Pos:NVPosition(5.0, 5.0, 5.0) Type:SCALE];

3、立方体边移动边缩放边自旋转

图片:WechatIMG187.jpg


代码:
    // 设置关键帧
    // 在4秒内从(0,0,0)的位置线形的移动到(0,10,0)的位置
    [move createKeyFrameWithTimePos:0 Pos:NVPosition(0.0, 0.0, 0.0) Type:TRANSLATE];
    [move createKeyFrameWithTimePos:4 Pos:NVPosition(0.0, 10.0, 0.0) Type:TRANSLATE];
    
    // 新开一个运动轨道,在4秒内从1倍放大到5倍
    [move createKeyFrameWithTimePos:0 Pos:NVPosition(1.0, 1.0, 1.0) Type:SCALE];
    [move createKeyFrameWithTimePos:4 Pos:NVPosition(5.0, 5.0, 5.0) Type:SCALE];
    
    // 新开一个运动轨道,在4秒内绕z轴旋转360度
    [move createKeyFrameWithTimePos:0 Pos:NVPosition(0.0, 0.0, 0.0) Type:ROTATION];
    [move createKeyFrameWithTimePos:4 Pos:NVPosition(0.0, 0.0, 360.0) Type:ROTATION];
  
4、贝塞尔曲线
添加头文件#import''NVBezierPath.h'', onCreate方法中实例该轨迹类,代码如图

图片:WechatIMG188.jpg

图片:WechatIMG189.jpg


代码:
   /**
     * startPoint 轨迹的起始点
     * controlPoint1 控制点1
     * controlPoint2 控制点2
     * startPoint 轨迹的结束点
     **/
    NVVector3f startPoint = NVPosition(10.0, 0, 5.5);
    NVVector3f controlPoint1 = NVPosition(6.0, 0, 3.5);
    NVVector3f controlPoint2 = NVPosition(8.0, 0, 4.5);
    NVVector3f endPoint = NVPosition(10.0, 0, 0.0);
    // 实例话贝塞尔曲线对象
    mMainPath = [[NVBezierPath alloc] initWithBezier:mContext Name:@"BezierPath"];
    // 设置曲线的精细程度
    [mMainPath setSubdivision:mSubdivision];
    // 设置贝塞尔轨迹起始点
    [mMainPath setPoints:startPoint EndPoint:endPoint];
    // 设置控制点
    [mMainPath setControlPoints:controlPoint1 Point2:controlPoint2];
    // 描边绘制
    [mMainPath stroke];

   // 实例话动画对象
    NVAnimationEffect *move = [[NVAnimationEffect alloc] initWithAnimation:@"moveAni" Context:self Widget:cube Duration:4.0];
    // 将贝塞尔曲线设置到动画中
    [move selectPath:mMainPath Type:TRANSLATE];
    // 是否循环播放动画
    [move setLoop:YES];
    
    // 将动画对象添加到场景中
    [self addAnimEffect:move];
    
    // 开始执行运动
    [move start];

运行项目,可以看到立方体按照自己设置的轨迹运动起来了。

欢迎联系:
开发者

欢迎分享

游客

返回顶部