LEAPMOTION开发UI专题(2)

过了这么久才来更这篇实在是因为项目工程量实在是不允许

首先声明我并不是专业的UI设计人员 我们所有的leap UI设计全部来源与项目需求 且因为项目不是商业项目 所以设计方法看起来有一种“邪门歪道”的既视感 但是为VR/AR环境中的交互设计提供了一种思路

特别提示:以下内容并不是针对初学者而言的

如果你是个unity/leap开发的双面小白 那么基本可以不用看这篇文章了

整个项目的效果可以去这里看视频

OK~

言归正传

我们先来看看效果:

sence2


这是一个用手势控制选择的界面选择的时候会根据手势的挥动方向来进行左右切换
也就是我们上一篇文章中提到的手势操作交互,这类操作不与UI元素进行交运算(触发)
所以设计起来相对独立 也就是说 这类UI元素的制作可以按照普通的UI制作方式来进行

所以 在整个软件中 这个UI显得最普通 但是就是普通依旧不是那么好做

想实现一个类似IPhone音乐的选择界面并不是那么容易
像这样



这种动态效果通过静态图片无法很好地展示 但是想试想一个细微的效果实际上需要大量的工作


这个UI整个比较复杂所以我只能不太完整的去讲解
目录
这是它的目录结构 在某一个版本中 我曾经写了动态生成这些展示标记 但是由于数量变化会引起后面的缩放系数bug 我就改回了手动添加
text
这是每个UI元素的组成 其中有些组件是不必要的主要是为了原先鼠标操作而设计
( 后来整体取消了软件鼠标操作的功能 但保留了这些组件 比如碰撞器 对于一个手势操纵的UI类型来说完全是没必要的)

所以

针对这个UI元素来说 可讲的就只剩下

1.怎么细致的实现元素转动效果
2.怎么用手势控制旋转


一,转动效果 这其实很多demo里面都会出现 而这个实现的那我们来看看主要的结构
这里写图片描述
命名清晰明了 enhance控制器 控制 gameobject(UItexture)
UItexture下放了一个canvas 然后canvas上有三个text组件放置三组文字
sprite是背景控制(这里的sprite其实就是截取图形的插件)
有了六七列表我们就可以在控制器里通过代码来控制了

这里写图片描述

有两个类一个 EnhancelScrollView一个 EnhanceItem
首先定义 EnhanceItem脚本附在每个UItexture上面 设置flag

using UnityEngine;
using System.Collections;

public class EnhanceItem : MonoBehaviour
{

    // 在ScrollViewitem中的索引
    internal int scrollViewItemIndex = 0;

    // 夹角大小
    internal float angla = 0f;
    // 动画时间值
    internal float dValueTime = 0f;

    // 前后项
    internal EnhanceItem front, back;



    /*
     * 
     * 
     * 
     * 
     *   internal关键字是类型和类型成员的访问修饰符。只有在同一个程序集的文件中,内部类型或者是成员才可以访问。
     * 这是msdn上对internal的描述。
     * 类型就是enum(枚举类型),class(类),interface(接口),struct(结构)等类型。
     * 类型成员如函数,成员变量等。
     * 
     * 一个完整的.exe或者是.dll文件就是一个程序集,一般伴随着exe程序集产生的还有一个程序集清单
     * ,.exe.config文件。下面我就用一个例子来说明“internal关键字是类型和类型成员的访问修饰符。
     * 只有在同一个程序集的文件中,内部类型或者是成员才可以访问”。
     * 

     * 
     */



    public int flag = 777;//flag


    private Vector3 targetPos = Vector3.one;
    private Vector3 targetScale = Vector3.one;

    private Transform mTrs;
    private UITexture mTexture;

    void Awake()
    {
        mTrs = this.transform;
        mTexture = this.GetComponent<UITexture>();
    }

    void Start()
    {
        UIEventListener.Get(this.gameObject).onClick = OnClickScrollViewItem;
    }

    // 当点击Item,将该item移动到中间位置
    private void OnClickScrollViewItem(GameObject obj)
    {
        EnhancelScrollView.GetInstance().SetHorizontalTargetItemIndex(scrollViewItemIndex);
    }

    /// <summary>
    /// 更新该Item的缩放和位移
    /// </summary>
    public void UpdateScrollViewItems(float xValue, float yValue, float scaleValue)
    {
        targetPos.x = xValue;
        targetPos.y = yValue;
        targetScale.x = targetScale.y = scaleValue;

        mTrs.localPosition = targetPos;
        mTrs.localScale = targetScale;
    }

    public void SetSelectColor(bool isCenter)
    {
        if (mTexture == null)
            mTexture = this.GetComponent<UITexture>();

        if (isCenter)
            mTexture.color = Color.white;
        else
            mTexture.color = Color.gray;
    }
}

EnhancelScrollView脚本作为控制脚本附着在控制物体上
他就相当于每个物体

那么手势控制:

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using Leap;

// [ExecuteInEditMode]
public class EnhancelScrollView : MonoBehaviour
{
    // 含有滑动项目的面板
    public GameObject enhanceScrollView;

    // 缩放曲线
    public AnimationCurve scaleCurve;
    // 位移曲线
    public AnimationCurve positionCurve;
    // 动画时间
    public float duration = 0.2f;

    // 宽度
    public float width = 800.0f;
    // y轴坐标固定值(所有的item的y坐标一致)
    public float yPositionValue = 46.0f;

    // 中间显示目标时间线(0显示第一个,0.5显示中间一个)
    public float horizontalTargetValue = 0.0f;

    // 滑动起始力
    public float touchStartPower = 0.5f;
    // 滑动阻力
    public int touchForce = 120;

    // 目标对象列表
    private List<EnhanceItem> scrollViewItems;
    // 目标对象Widget脚本,用于depth排序
    private List<UITexture> textureTargets;

    // 开始X坐标
    private float startXPos = 0f;
    // 当前处于中间的item
    public EnhanceItem centerItem;
   // 当前出移动中,不能进行点击切换
    private bool isInChange = false;   

    // 位置动画的中间位置时间
    private float positionCenterTime = 0.5f;
    // 当前精度小数位
    private int curACC = 4;

    // 横向变量值
    private float horizontalValue = 0.0f;

    // 移动动画参数
    private float originHorizontalValue = 0.0f;
    private float currentDuration = 0.0f;

    private static EnhancelScrollView instance;
    internal static EnhancelScrollView GetInstance()
    {
        return instance;
    }
     //内部类型或成员才是可访问的


    //__________________________________________________________
//  动作识别部分定义
    public HandController hc;


    Hand lefthand=null;
    Hand righthand = null;
    Hand last_lefthand = null;
    Hand last_righthand = null;
    Frame currentFrame = null;//定义当前帧


    bool lefthandexist = false;//判断左右手是否在场景中存在
    bool righthandexist = false;

    float sweptAngle = 
  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值