之前分享了关于两点之间抛物线的“金手指”的实现方案，然后有朋友问我，一般情况下会给出速度，如何模拟自然的轨迹。
我一听这不是很容易实现么，根据之前的公式，得出两点之间时间恒定时，轨迹是确定的，也就是说平均速度是恒定。
那么反过来，在给定平均速度，然后再通过距离/速度，就可得出时间，那么轨迹也就确定了。
OK，我不多废话，直接上代码：
using System.Collections;
public class PaoWuLine : MonoBehaviour
{
public float ShotSpeed = 10;
private float time = 1;//代表从A点出发到B经过的时长
public Transform pointA;//点A
public Transform pointB;//点B
public float g = -10;//重力加速度
// Use this for initialization
private Vector3 speed;//初速度向量
private Vector3 Gravity;//重力向量
private Vector3 currentAngle;
void Start()
{
time = Vector3.Distance(pointA.position, pointB.position)/ShotSpeed;
transform.position = pointA.position;//将物体置于A点
//通过一个式子计算初速度
speed = new Vector3((pointB.position.x - pointA.position.x) / time,
(pointB.position.y - pointA.position.y) / time - 0.5f * g * time, (pointB.position.z - pointA.position.z) / time);
Gravity = Vector3.zero;//重力初始速度为0
}
private float dTime = 0;
// Update is called once per frame
void FixedUpdate()
{
Gravity.y = g * (dTime += Time.fixedDeltaTime);//v=at
//模拟位移
transform.position += (speed + Gravity) * Time.fixedDeltaTime;
currentAngle.x = -Mathf.Atan((speed.y + Gravity.y) / speed.z) * Mathf.Rad2Deg;
transform.eulerAngles = currentAngle;
}
}
这次直接把角度加上了，喜欢的朋友可以自己测试。
时间恒定的两点轨迹：http://www.cnblogs.com/jqg-aliang/p/4806017.html
一般抛物线轨迹：http://www.cnblogs.com/jqg-aliang/p/4806002.html#3292517
好了，关于愤怒的小鸟，弓箭之类的简单实现算法差不多够用了。之前我研究了很久的导弹飞行算法有了新的方向，
使用抛物线模拟动态轨迹，将会有更加真实自然的效果。欢迎关注。
本文链接：unity抛物线，平均速度下的运动轨迹，转载请注明。
最近做一个项目，应用在移动端，其中涉及一个评论组件。按照现有的趋势，是有评论的地方必有点赞。当然我们的组件也未免于难。大概操作部分设计如下
如此简low的设计，点个赞加个一这效果实在是简直是捞比啊！！！_(:з」∠)_（我知道设计不会看到这篇文章）
怎么办，一世英名不能毁于此啊(�s�F□′)�s�喋擤ォ撸�如果加个动画会不会挽回点颜面？
卧槽，这样一个45度角仰望天空上扬的‘+1’的1s动画总算是有点潮！
狗尾续貂开干吧！衣裤！
大体方案有两种：方案一 js动态添加节点（+1），然后控制css变换。方案二 利用css3 animation实现动画。
考虑移动端css3支持度较好，性能也比用js控制的要好，果断选方案二！动画的实现很好说，keyframe定义动画就好了，这个‘+1’怎么引入呢，不想用到js。。。页面直接埋点？增加页面dom结构貌似也是不好的--、
诶~伪元素：after,:before ,定义在css里，也不会增加dom结构O(∩_∩)O~~
就这么干！~\(�R��Q)/~
先初始化好位置
content:(+1);
display:block;
position:absolute;
top:0;
right:5px;
font-style: normal;
color:rgba(255,115,0,0);
}
在定义好动画
再添加上动画
.animation(up 1s linear);
}
(以上代码用了less和lesshat)
哦了，只要点击的时候给元素添加rise这个类就好啦。测试！
chrome okay！
qq ok!
自带浏览器 ok！
uc ... uc ...uc ...尼玛你倒是飞啊！(�s�F□′)�s�喋擤ォ�
算了，uc这个坑，前面吐槽多了，应该是见怪不怪了。。。排查问题吧。
首先想到是不支持translate3d,去掉换成操作top，right依然无效，况且很多别的页面看到有用到的，难道是animation哪些属性没写全？后来参照成功动画的页面把属性补全依然不行。。。后来翻看多个页面发现都能实现animation在uc上动画的。我自己把页面copy过来也可以的！真是奇了怪了，没办法谁让在下叶良辰，我有一百个方法找出问题所在！在默默地给刚才的装逼打满分的时候想到，成功动画的页面没有一个是操作伪元素的！！！是不是这个原因呢？后来将伪元素去掉，在所有点赞的按钮下埋了<i>+1</i>这行代码。然后做动画，测试！居然ok了！！！干！！！
uc不支持伪元素使用animation动画
不能太激动，先把解决方案应用到项目上（虽然页面多了i的标签，相比js控制动态添加还是好一点，为了效果的统一折中取方案）。
哈哈哈~终于可以在自己的秘籍上写上一章《论我良辰如何打败赵日天 之 我知道uc伪元素应用css3动画bug》
本文链接：uc手机浏览器使用animation的一个坑，转载请注明。
没有评论:
发表评论