标签: easing

我正在使用Microsoft Interactivity和Microsoft Interactions在我的代码隐藏中基于Property旋转对象.为了使旋转更加平滑,我添加了一个缓动功能.它可以完美地制作动画,但是当它到达动画结束的1个分割帧时,旋转将重置为动画之前的值,然后切换回旋转后的值,导致它来回"抽搐" .这只发生在EaseOut上.

<i:Interaction.Triggers>
    <ie:PropertyChangedTrigger Binding="{Binding Rotation}">
        <ie:ChangePropertyAction TargetName="RotateTransformer" PropertyName="Angle" Value="{Binding Rotation}" Duration="0:0:2">
            <ie:ChangePropertyAction.Ease>                        
                <BackEase EasingMode="EaseOut" Amplitude="1.2" />
            </ie:ChangePropertyAction.Ease>
        </ie:ChangePropertyAction>
    </ie:PropertyChangedTrigger>
</i:Interaction.Triggers>
<Path Stroke="Black" Fill="Gray">
    <Path.RenderTransform>
        <RotateTransform x:Name="RotateTransformer" CenterX="64" CenterY="105" />
    </Path.RenderTransform>
    <Path.Data>
        <PathGeometry>
            <PathFigureCollection>
                <PathFigure StartPoint="64,0" >
                    <LineSegment Point="39,110" />
                    <LineSegment Point="64, 70" />
                    <LineSegment Point="39,180" />
                    <LineSegment Point="89, 180" />
                    <LineSegment Point="64,70"/>
                    <LineSegment Point="89,110" />
                    <LineSegment Point="64,0" />
                </PathFigure>
            </PathFigureCollection>
        </PathGeometry>
    </Path.Data>
</Path>

在cocos2d中,您可以轻松使用CCSprites并以各种方式移动它们.最重要的是 - 他们可以放松身心.对于大多数游戏来说,这对于平稳运动等是理

id action = [CCMoveTo actionWithDuration:dur position:pos];
move = [CCEaseInOut actionWithAction:action rate:2];
[self runAction: move];

当移动box2d体时,附加到它的精灵会在box2d step()之后更新.移动精灵然后更新正文不是一个选项,因为它完全违背了物理框架的目的.

因此,我成功实现的另一个选项是通过将精灵本身视为一个力学实体来计算精灵的位移,速度和加速度.每次我在精灵上调用我的update()以便角色可以决定移动的位置等,我的超类也会存储先前的位置和速度.通过除以PTM_RATIO将它们存储为符合box2d的值.

在CCSprite的子类中,称为FMSprite:

-(CGPoint) displacement {
    return ccpSub(self.position, lastPos);
}

-(b2Vec2) getSpriteVelocity:(ccTime)dt {
    return b2Vec2(self.displacement.x / dt / PTM_RATIO,
                  self.displacement.y / dt / PTM_RATIO);
}

-(b2Vec2) getSpriteAccel:(ccTime)dt {
    b2Vec2 currVel = [self getSpriteVelocity:dt];
    if (dt == 0) {
        return b2Vec2(0,0);
    } else {    
        float accelX = (currVel.x - lastVel.x)/dt;
        float accelY = (currVel.y - lastVel.y)/dt;
        return b2Vec2(accelX, accelY);
    }
}

// This …

我正在实现一个网站,我想在点击时更改背景图像,但很容易,如淡出淡出等等.

onclick部分是用Jquery实现的,但我正在努力解决缓动部分问题.

我在网上搜索过这个,但是每个解决方案都只在页面的一小部分使用div.

对我来说问题是我使用这些div作为一个整页,100%的宽度和高度,我有内容在div前面.

我想过使用精灵和背景位置的动画,但这没有帮助,因为我希望我的页面有响应,我有背景网址的百分比和精灵需要你声明固定的宽度(如果我错了,纠正我).

另外我必须在div后面添加另一个div,所以改变不透明度解决方案无能为力.我正在实施这样的网站:http://www.samsung.com/global/microsite/galaxynote3-gear/

HTML:

<div class="Page" id="feauture3">
    <div id="feauture3_content">
        <div id="feauture3_1"><strong>Menu1</strong></div>
        <div id="feauture3_2"><strong>Menu2</strong></div>
        <div id="feauture3_3"><strong>Menu3</strong></div>
        <div id="feauture3_4"><strong>Menu4</strong></div>
    </div>
</div>

CSS:

#feauture3_1:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_2:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_3:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3_4:hover {
        background-color:#f2af95;
        cursor:pointer;
}

#feauture3 {
        position: fixed;
        height: 100%;
        width: 100%;
        background: url('http://www.asphaltandrubber.com/wp-content/gallery/2013-kawasaki-ninja-z800-z800e/2013-kawasaki-ninja-z800-02.jpg') 50% 50% no-repeat;
        left:0; 
        background-size: cover;
        background-color:#e18764;
        color:red;
}

jQuery的:

jQuery(document).ready(function($){
       $("#feauture3_1").click(function(){
       $("#feauture3").css('background-image','url("http://www.motorcyclespecs.co.za/Gallery%20B/Kawasaki%20Ninja%20650R%2013.jpg")');
    });

    $("#feauture3_2").click(function(){
        $("#feauture3").css('background-image','url("http://images5.fanpop.com/image/photos/31700000/HOT-BABE-KAWASAKI-Z1000-motorcycles-31778270-1920-1200.jpg")')
    });

    $("#feauture3_3").click(function(){
        $("#feauture3").css('background-image','url("http://b296d35169b22ec514a7-3f0e5c3ce41f2ca4459ddb89d451f8d9.r21.cf2.rackcdn.com/wp-content/uploads/2012/11/Kawasaki-Z1-by-Ac-Sanctuary-.jpg")')
    });

    $("#feauture3_4").click(function(){
        $("#feauture3").css('background-image','url("http://4.bp.blogspot.com/-ar4zyO_Ws4M/UekF8jk7nRI/AAAAAAAA1q4/ugQZlRGTLkk/s1600/Kawasaki-Z-1000-.jpg")')
    });

}); …

我正在尝试为snap.svg动画创建自定义缓动.我查看了文档(http://snapsvg.io/docs/#mina),但我不清楚如何转换CSS3样式的cubic-bezier(例如:cubic-bezier(0.17,0.67,0.25, 0.99))使用Snap.svg自定义缓动

我一直试图找到一个纯粹的JavaScript轻松实现几个小时,但找不到任何.接近的那些没有任何意义.我所能找到的只是一堆没有实现的缓动函数.

例如,这些函数:

function linear(time, begin, change, duration) {
    return change * time / duration + begin;
}

function easeInQuad(t) {
    return t*t
},

function easeOutQuad(t) {
    return t*(2-t)
},

困扰我的一件事是fps在哪里发挥作用？它与持续时间直接相关.我没见过它.

如何在以下动画中实现上述缓动功能？

的jsfiddle

var box = document.getElementById("box");

var fps		= 60;
var duration	= 2; // seconds
var start	= 0; // pixel
var finish	= window.innerWidth - box.clientWidth;
var distance	= finish - start;
var increment	= distance / (duration * fps);

var position = start;

function move() {
  position …

我试图在下面的动画中模拟引力/加速度.earth随着距离越来越近,角速度应该sol越来越大.我想我需要一个缓动功能来修改earth.angularVelocity但不知道怎么做.

我不知道是否已经定义了缓动函数或自定义函数.我需要的缓动函数应该像在这个图中一样工作:

earth的近日点是180°,远日点是0/360°.如何创建这样的功能并使其工作？

function pullRelease(angularPosition, begin, change, maxVelocity) {
    // ?
}
earth.angularVelocity = pullRelease(earth.angularPosition, 0, 360, 3);

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var sol = {
  x: 125,
  y: 150,
  r: 30,
  fill: "gold",
};

var orbit = {
  x: 200,
  y: 150,
  semiMajor: 150,
  semiMinor: 75,
};

var earth = {
  r: 15,
  fill: "dodgerblue",
  angularPosition: 0,
  angularVelocity: 1,
};

// draw sun …

我正在使用一些CSS动画.但我发现,CSS过渡仅支持缓动功能.

轻松| 线性| 安慰| 缓和| 易于进出| 立方贝塞尔()

我想在纯css的动画中使用像easOutBack缓动的东西.我想用webkit动画来做.但只有safari支持它.

easeOutBack运动是一种运动,其中物体将超越边界并再次返回.更多关于不同的运动功能.您可以在下面看到此链接.

http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html

有人建议如何在css转换动画中实现easeOutBack缓动？

我刚刚从JQuery Cycle转移到FlexSlider插件,并且真的很难让以下部分工作:

1. 我在列表项中有多个图像,这些图像连接起来显示为一个大图像.我想关闭缓和,以便它以相同的速度不断滚动水平.

2. 连续默认动画会移动缓慢,但有上一个/下一个箭头,我希望动画加速,当你点击它时转到下一个列表项,这可能吗？!

3. 我希望滚动可以在悬停时暂停中间动画.如果使用"pauseOnHover"选项,它将一直等到滚动到下一张幻灯片暂停.

如果有人能帮我解决上述任何问题,我将非常感激.这是我的代码

$('.flexslider').flexslider({
    animation:'slide',             
    easing:'linear',
    controlNav: false,
    useCCS:false,
    animationSpeed: Modernizr.touch ? 400 : 10000,
    pauseOnHover: true,
    slideshowSpeed:1000,
    animationSpeed:10000,
});

我的HTML基本上就是你在插件示例中看到的 - 我没有调整任何东西.

再一次,非常感谢任何帮助!

我正在寻找一种为补间生成缓动函数的方法，我需要Java标准格式的Javascript函数格式的缓动函数t, b, c, d。

我找到了一个很棒的工具来生成CSS缓动：http : //cubic-bezier.com/，但是输出对我来说毫无用处。

• 有没有办法将此格式转换为Javascript缓动函数？
• 有没有更好的工具可以直接构建Javascript缓动函数？

所需的格式如下：

function(t, b, c, d){
    var ts = (t /= d) * t;
    var tc = ts * t;
    return b+c*(4.257575757575761*tc*ts + -7.9545454545454595*ts*ts + 0.6818181818181834*tc + 4.46969696969697*ts + -0.4545454545454546*t);
}

我需要重现与此处相同的效果:http://www.chanel.com/fr_FR/mode/haute-couture.html =对鼠标移动事件的滑动效果.

我只需要动画部分的一些帮助.

    function frame() {
      $('.images-gallery').css({
        'transform': 'translateX('+ -mouseXPerc +'%)'
      });
      requestAnimationFrame(frame);
    }

    requestAnimationFrame(frame);
    $(document).on('mousemove',function(e){
      mouseXPerc = e.pageX/containerWidth*100;

    });

这是我到目前为止所做的.它的工作原理,但你可以想象,它是非常原始的,我需要一些缓和.如何编辑我frame() function以使事情变得更顺畅？

编辑:我不能使用CSS转换/动画,因为我更改requestAnimationFrame上的值(每1/30秒).