Sunpy/opsu-dance
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added easing functions for all-around better animations.

Browse Source 
These are Robert Penner's easing functions (http://robertpenner.com/easing/), refactored by CharlotteGore to only take a t parameter (https://github.com/CharlotteGore/functional-easing). Licensed under BSD (the former) and MIT (the latter).

Related changes:
- Added "AnimatedValue" utility class for updating values used in animations.
- MenuButton now uses AnimatedValue to handle its animations (still linear by default).
- Added in-out-back easings on logo, mods, and various other elements; added out-bounce easings on button menu.

Signed-off-by: Jeffrey Han <itdelatrisu@gmail.com>
This commit is contained in:
Jeffrey Han
2015-08-05 22:28:14 -05:00
parent 6a4c6a8d37
commit c91146b024
10 changed files with 588 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
src/itdelatrisu/opsu/ui/MenuButton.java
View File

@@ -18,7 +18,8 @@
package itdelatrisu.opsu.ui;
import itdelatrisu.opsu.Utils;
import itdelatrisu.opsu.ui.animations.AnimatedValue;
import itdelatrisu.opsu.ui.animations.AnimationEquation;
import org.newdawn.slick.Animation;
import org.newdawn.slick.Color;
@@ -63,11 +64,23 @@ public class MenuButton {
/** The hover actions for this button. */
private int hoverEffect = 0;
/** The current and max scale of the button. */
private float scale = 1f, hoverScale = 1.25f;
/** The hover animation duration, in milliseconds. */
private int animationDuration = 100;
/** The current and base alpha level of the button. */
private float alpha = 1f, baseAlpha = 0.75f;
/** The hover animation equation. */
private AnimationEquation animationEqn = AnimationEquation.LINEAR;
/** The scale of the button. */
private AnimatedValue scale;
/** The default max scale of the button. */
private static final float DEFAULT_SCALE_MAX = 1.25f;
/** The alpha level of the button. */
private AnimatedValue alpha;
/** The default base alpha level of the button. */
private static final float DEFAULT_ALPHA_BASE = 0.75f;
/** The scaled expansion direction for the button. */
private Expand dir = Expand.CENTER;
@@ -75,8 +88,11 @@ public class MenuButton {
/** Scaled expansion directions. */
public enum Expand { CENTER, UP, RIGHT, LEFT, DOWN, UP_RIGHT, UP_LEFT, DOWN_RIGHT, DOWN_LEFT; }
/** The current and max rotation angles of the button. */
private float angle = 0f, maxAngle = 30f;
/** The rotation angle of the button. */
private AnimatedValue angle;
/** The default max rotation angle of the button. */
private static final float DEFAULT_ANGLE_MAX = 30f;
/**
* Creates a new button from an Image.
@@ -192,15 +208,15 @@ public class MenuButton {
float oldAlpha = image.getAlpha();
float oldAngle = image.getRotation();
if ((hoverEffect & EFFECT_EXPAND) > 0) {
if (scale != 1f) {
image = image.getScaledCopy(scale);
if (scale.getValue() != 1f) {
image = image.getScaledCopy(scale.getValue());
image.setAlpha(oldAlpha);
}
}
if ((hoverEffect & EFFECT_FADE) > 0)
image.setAlpha(alpha);
image.setAlpha(alpha.getValue());
if ((hoverEffect & EFFECT_ROTATE) > 0)
image.setRotation(angle);
image.setRotation(angle.getValue());
image.draw(x - xRadius, y - yRadius, filter);
if (image == this.img) {
image.setAlpha(oldAlpha);
@@ -217,9 +233,10 @@ public class MenuButton {
imgR.draw(x + xRadius - imgR.getWidth(), y - yRadius, filter);
} else if ((hoverEffect & EFFECT_FADE) > 0) {
float a = image.getAlpha(), aL = imgL.getAlpha(), aR = imgR.getAlpha();
image.setAlpha(alpha);
imgL.setAlpha(alpha);
imgR.setAlpha(alpha);
float currentAlpha = alpha.getValue();
image.setAlpha(currentAlpha);
imgL.setAlpha(currentAlpha);
imgR.setAlpha(currentAlpha);
image.draw(x - xRadius + imgL.getWidth(), y - yRadius, filter);
imgL.draw(x - xRadius, y - yRadius, filter);
imgR.draw(x + xRadius - imgR.getWidth(), y - yRadius, filter);
@@ -267,28 +284,61 @@ public class MenuButton {
*/
public void resetHover() {
if ((hoverEffect & EFFECT_EXPAND) > 0) {
this.scale = 1f;
scale.setTime(0);
setHoverRadius();
}
if ((hoverEffect & EFFECT_FADE) > 0)
this.alpha = baseAlpha;
alpha.setTime(0);
if ((hoverEffect & EFFECT_ROTATE) > 0)
this.angle = 0f;
angle.setTime(0);
}
/**
* Removes all hover effects that have been set for the button.
*/
public void removeHoverEffects() { hoverEffect = 0; }
public void removeHoverEffects() {
this.hoverEffect = 0;
this.scale = null;
this.alpha = null;
this.angle = null;
}
/**
* Sets the hover animation duration.
* @param duration the duration, in milliseconds
*/
public void setHoverAnimationDuration(int duration) {
this.animationDuration = duration;
if (scale != null)
scale.setDuration(duration);
if (alpha != null)
alpha.setDuration(duration);
if (angle != null)
angle.setDuration(duration);
}
/**
* Sets the hover animation equation.
* @param eqn the equation to use
*/
public void setHoverAnimationEquation(AnimationEquation eqn) {
this.animationEqn = eqn;
if (scale != null)
scale.setEquation(eqn);
if (alpha != null)
alpha.setEquation(eqn);
if (angle != null)
angle.setEquation(eqn);
}
/**
* Sets the "expand" hover effect.
*/
public void setHoverExpand() { hoverEffect |= EFFECT_EXPAND; }
public void setHoverExpand() { setHoverExpand(DEFAULT_SCALE_MAX, this.dir); }
/**
* Sets the "expand" hover effect.
* @param scale the maximum scale factor (default 1.25f)
* @param scale the maximum scale factor
*/
public void setHoverExpand(float scale) { setHoverExpand(scale, this.dir); }
@@ -296,45 +346,45 @@ public class MenuButton {
* Sets the "expand" hover effect.
* @param dir the expansion direction
*/
public void setHoverExpand(Expand dir) { setHoverExpand(this.hoverScale, dir); }
public void setHoverExpand(Expand dir) { setHoverExpand(DEFAULT_SCALE_MAX, dir); }
/**
* Sets the "expand" hover effect.
* @param scale the maximum scale factor (default 1.25f)
* @param scale the maximum scale factor
* @param dir the expansion direction
*/
public void setHoverExpand(float scale, Expand dir) {
hoverEffect |= EFFECT_EXPAND;
this.hoverScale = scale;
this.scale = new AnimatedValue(animationDuration, 1f, scale, animationEqn);
this.dir = dir;
}
/**
* Sets the "fade" hover effect.
*/
public void setHoverFade() { hoverEffect |= EFFECT_FADE; }
public void setHoverFade() { setHoverFade(DEFAULT_ALPHA_BASE); }
/**
* Sets the "fade" hover effect.
* @param baseAlpha the base alpha level to fade in from (default 0.7f)
* @param baseAlpha the base alpha level to fade in from
*/
public void setHoverFade(float baseAlpha) {
hoverEffect |= EFFECT_FADE;
this.baseAlpha = baseAlpha;
this.alpha = new AnimatedValue(animationDuration, baseAlpha, 1f, animationEqn);
}
/**
* Sets the "rotate" hover effect.
*/
public void setHoverRotate() { hoverEffect |= EFFECT_ROTATE; }
public void setHoverRotate() { setHoverRotate(DEFAULT_ANGLE_MAX); }
/**
* Sets the "rotate" hover effect.
* @param maxAngle the maximum rotation angle, in degrees (default 30f)
* @param maxAngle the maximum rotation angle, in degrees
*/
public void setHoverRotate(float maxAngle) {
hoverEffect |= EFFECT_ROTATE;
this.maxAngle = maxAngle;
this.angle = new AnimatedValue(animationDuration, 0f, maxAngle, animationEqn);
}
/**
@@ -371,45 +421,21 @@ public class MenuButton {
if (hoverEffect == 0)
return;
int d = delta * (isHover ? 1 : -1);
// scale the button
if ((hoverEffect & EFFECT_EXPAND) > 0) {
int sign = 0;
if (isHover && scale < hoverScale)
sign = 1;
else if (!isHover && scale > 1f)
sign = -1;
if (sign != 0) {
scale = Utils.getBoundedValue(scale, sign * (hoverScale - 1f) * delta / 100f, 1, hoverScale);
if (scale.update(d))
setHoverRadius();
}
}
// fade the button
if ((hoverEffect & EFFECT_FADE) > 0) {
int sign = 0;
if (isHover && alpha < 1f)
sign = 1;
else if (!isHover && alpha > baseAlpha)
sign = -1;
if (sign != 0)
alpha = Utils.getBoundedValue(alpha, sign * (1f - baseAlpha) * delta / 200f, baseAlpha, 1f);
}
if ((hoverEffect & EFFECT_FADE) > 0)
alpha.update(d);
// rotate the button
if ((hoverEffect & EFFECT_ROTATE) > 0) {
int sign = 0;
boolean right = (maxAngle > 0);
if (isHover && angle != maxAngle)
sign = (right) ? 1 : -1;
else if (!isHover && angle != 0)
sign = (right) ? -1 : 1;
if (sign != 0) {
float diff = sign * Math.abs(maxAngle) * delta / 125f;
angle = (right) ?
Utils.getBoundedValue(angle, diff, 0, maxAngle) :
Utils.getBoundedValue(angle, diff, maxAngle, 0);
}
}
if ((hoverEffect & EFFECT_ROTATE) > 0)
angle.update(d);
}
/**
@@ -422,10 +448,11 @@ public class MenuButton {
image = anim.getCurrentFrame();
int xOffset = 0, yOffset = 0;
float currentScale = scale.getValue();
if (dir != Expand.CENTER) {
// offset by difference between normal/scaled image dimensions
xOffset = (int) ((scale - 1f) * image.getWidth());
yOffset = (int) ((scale - 1f) * image.getHeight());
xOffset = (int) ((currentScale - 1f) * image.getWidth());
yOffset = (int) ((currentScale - 1f) * image.getHeight());
if (dir == Expand.UP || dir == Expand.DOWN)
xOffset = 0; // no horizontal offset
if (dir == Expand.RIGHT || dir == Expand.LEFT)
@@ -435,7 +462,7 @@ public class MenuButton {
if (dir == Expand.DOWN || dir == Expand.DOWN_LEFT || dir == Expand.DOWN_RIGHT)
yOffset *= -1; // flip y for down
}
this.xRadius = ((image.getWidth() * scale) + xOffset) / 2f;
this.yRadius = ((image.getHeight() * scale) + yOffset) / 2f;
this.xRadius = ((image.getWidth() * currentScale) + xOffset) / 2f;
this.yRadius = ((image.getHeight() * currentScale) + yOffset) / 2f;
}
}

3
src/itdelatrisu/opsu/ui/UI.java
View File

@@ -26,6 +26,7 @@ import itdelatrisu.opsu.Utils;
import itdelatrisu.opsu.audio.SoundController;
import itdelatrisu.opsu.beatmap.BeatmapParser;
import itdelatrisu.opsu.replay.ReplayImporter;
import itdelatrisu.opsu.ui.animations.AnimationEquation;
import javax.swing.JOptionPane;
import javax.swing.UIManager;
@@ -106,6 +107,8 @@ public class UI {
Image back = GameImage.MENU_BACK.getImage();
backButton = new MenuButton(back, back.getWidth() / 2f, container.getHeight() - (back.getHeight() / 2f));
}
backButton.setHoverAnimationDuration(350);
backButton.setHoverAnimationEquation(AnimationEquation.IN_OUT_BACK);
backButton.setHoverExpand(MenuButton.Expand.UP_RIGHT);
}

124
src/itdelatrisu/opsu/ui/animations/AnimatedValue.java Normal file
View File

@@ -0,0 +1,124 @@
/*
* opsu! - an open-source osu! client
* Copyright (C) 2014, 2015 Jeffrey Han
*
* opsu! is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* opsu! is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with opsu!. If not, see <http://www.gnu.org/licenses/>.
*/
package itdelatrisu.opsu.ui.animations;
import itdelatrisu.opsu.Utils;
/**
* Utility class for updating a value using an animation equation.
*/
public class AnimatedValue {
/** The animation duration, in milliseconds. */
private int duration;
/** The current time, in milliseconds. */
private int time;
/** The base value. */
private float base;
/** The maximum difference from the base value. */
private float diff;
/** The current value. */
private float value;
/** The animation equation to use. */
private AnimationEquation eqn;
/**
* Constructor.
* @param duration the total animation duration, in milliseconds
* @param min the minimum value
* @param max the maximum value
* @param eqn the animation equation to use
*/
public AnimatedValue(int duration, float min, float max, AnimationEquation eqn) {
this.time = 0;
this.duration = duration;
this.value = min;
this.base = min;
this.diff = max - min;
this.eqn = eqn;
}
/**
* Returns the current value.
*/
public float getValue() { return value; }
/**
* Returns the current animation time, in milliseconds.
*/
public int getTime() { return time; }
/**
* Sets the animation time manually.
* @param time the new time, in milliseconds
*/
public void setTime(int time) {
this.time = Utils.clamp(time, 0, duration);
updateValue();
}
/**
* Sets the animation duration.
* @param duration the new duration, in milliseconds
*/
public void setDuration(int duration) {
this.duration = duration;
int newTime = Utils.clamp(time, 0, duration);
if (time != newTime) {
this.time = newTime;
updateValue();
}
}
/**
* Sets the animation equation to use.
* @param eqn the new equation
*/
public void setEquation(AnimationEquation eqn) {
this.eqn = eqn;
updateValue();
}
/**
* Updates the animation by a delta interval.
* @param delta the delta interval since the last call.
* @return true if an update was applied, false if the animation was not updated
*/
public boolean update(int delta) {
int newTime = Utils.getBoundedValue(time, delta, 0, duration);
if (time != newTime) {
this.time = newTime;
updateValue();
return true;
}
return false;
}
/**
* Recalculates the value by applying the animation equation with the current time.
*/
private void updateValue() {
float t = eqn.calc((float) time / duration);
this.value = base + (t * diff);
}
}

309
src/itdelatrisu/opsu/ui/animations/AnimationEquation.java Normal file
View File

@@ -0,0 +1,309 @@
/*
* opsu! - an open-source osu! client
* Copyright (C) 2014, 2015 Jeffrey Han
*
* opsu! is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* opsu! is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with opsu!. If not, see <http://www.gnu.org/licenses/>.
*/
package itdelatrisu.opsu.ui.animations;
/*
* These equations are copyright (c) 2001 Robert Penner, all rights reserved,
* and are open source under the BSD License.
* http://www.opensource.org/licenses/bsd-license.php
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
* - Redistributions of source code must retain the above copyright notice,
* this list of conditions and the following disclaimer.
* - Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
* - Neither the name of the author nor the names of contributors may be used
* to endorse or promote products derived from this software without specific
* prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
* ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
* POSSIBILITY OF SUCH DAMAGE.
*/
/**
* Easing functions for animations.
*
* @author Robert Penner (<a href="http://robertpenner.com/easing/">http://robertpenner.com/easing/</a>)
* @author CharlotteGore (<a href="https://github.com/CharlotteGore/functional-easing">https://github.com/CharlotteGore/functional-easing</a>)
*/
public enum AnimationEquation {
/* Linear */
LINEAR {
@Override
public float calc(float t) { return t; }
},
/* Quadratic */
IN_QUAD {
@Override
public float calc(float t) { return t * t; }
},
OUT_QUAD {
@Override
public float calc(float t) { return -1 * t * (t - 2); }
},
IN_OUT_QUAD {
@Override
public float calc(float t) {
t = t * 2;
if (t < 1)
return 0.5f * t * t;
t = t - 1;
return -0.5f * (t * (t - 2) - 1);
}
},
/* Cubic */
IN_CUBIC {
@Override
public float calc(float t) { return t * t * t; }
},
OUT_CUBIC {
@Override
public float calc(float t) {
t = t - 1;
return t * t * t + 1;
}
},
IN_OUT_CUBIC {
@Override
public float calc(float t) {
t = t * 2;
if (t < 1)
return 0.5f * t * t * t;
t = t - 2;
return 0.5f * (t * t * t + 2);
}
},
/* Quartic */
IN_QUART {
@Override
public float calc(float t) { return t * t * t * t; }
},
OUT_QUART {
@Override
public float calc(float t) {
t = t - 1;
return -1 * (t * t * t * t - 1);
}
},
IN_OUT_QUART {
@Override
public float calc(float t) {
t = t * 2;
if (t < 1)
return 0.5f * t * t * t * t;
t = t - 2;
return -0.5f * (t * t * t * t - 2);
}
},
/* Quintic */
IN_QUINT {
@Override
public float calc(float t) { return t * t * t * t * t; }
},
OUT_QUINT {
@Override
public float calc(float t) {
t = t - 1;
return (t * t * t * t * t + 1);
}
},
IN_OUT_QUINT {
@Override
public float calc(float t) {
t = t * 2;
if (t < 1)
return 0.5f * t * t * t * t * t;
t = t - 2;
return 0.5f * (t * t * t * t * t + 2);
}
},
/* Sine */
IN_SINE {
@Override
public float calc(float t) { return -1 * (float) Math.cos(t * (Math.PI / 2)) + 1; }
},
OUT_SINE {
@Override
public float calc(float t) { return (float) Math.sin(t * (Math.PI / 2)); }
},
IN_OUT_SINE {
@Override
public float calc(float t) { return (float) (Math.cos(Math.PI * t) - 1) / -2; }
},
/* Exponential */
IN_EXPO {
@Override
public float calc(float t) { return (t == 0) ? 0 : (float) Math.pow(2, 10 * (t - 1)); }
},
OUT_EXPO {
@Override
public float calc(float t) { return (t == 1) ? 1 : (float) -Math.pow(2, -10 * t) + 1; }
},
IN_OUT_EXPO {
@Override
public float calc(float t) {
if (t == 0 || t == 1)
return t;
t = t * 2;
if (t < 1)
return 0.5f * (float) Math.pow(2, 10 * (t - 1));
t = t - 1;
return 0.5f * ((float) -Math.pow(2, -10 * t) + 2);
}
},
/* Circular */
IN_CIRC {
@Override
public float calc(float t) { return -1 * ((float) Math.sqrt(1 - t * t) - 1); }
},
OUT_CIRC {
@Override
public float calc(float t) {
t = t - 1;
return (float) Math.sqrt(1 - t * t);
}
},
IN_OUT_CIRC {
@Override
public float calc(float t) {
t = t * 2;
if (t < 1)
return -0.5f * ((float) Math.sqrt(1 - t * t) - 1);
t = t - 2;
return 0.5f * ((float) Math.sqrt(1 - t * t) + 1);
}
},
/* Back */
IN_BACK {
@Override
public float calc(float t) { return t * t * ((OVERSHOOT + 1) * t - OVERSHOOT); }
},
OUT_BACK {
@Override
public float calc(float t) {
t = t - 1;
return t * t * ((OVERSHOOT + 1) * t + OVERSHOOT) + 1;
}
},
IN_OUT_BACK {
@Override
public float calc(float t) {
float overshoot = OVERSHOOT * 1.525f;
t = t * 2;
if (t < 1)
return 0.5f * (t * t * ((overshoot + 1) * t - overshoot));
t = t - 2;
return 0.5f * (t * t * ((overshoot + 1) * t + overshoot) + 2);
}
},
/* Bounce */
IN_BOUNCE {
@Override
public float calc(float t) { return 1 - OUT_BOUNCE.calc(1 - t); }
},
OUT_BOUNCE {
@Override
public float calc(float t) {
if (t < 0.36363636f)
return 7.5625f * t * t;
else if (t < 0.72727273f) {
t = t - 0.54545454f;
return 7.5625f * t * t + 0.75f;
} else if (t < 0.90909091f) {
t = t - 0.81818182f;
return 7.5625f * t * t + 0.9375f;
} else {
t = t - 0.95454546f;
return 7.5625f * t * t + 0.984375f;
}
}
},
IN_OUT_BOUNCE {
@Override
public float calc(float t) {
if (t < 0.5f)
return IN_BOUNCE.calc(t * 2) * 0.5f;
return OUT_BOUNCE.calc(t * 2 - 1) * 0.5f + 0.5f;
}
},
/* Elastic */
IN_ELASTIC {
@Override
public float calc(float t) {
if (t == 0 || t == 1)
return t;
float period = 0.3f;
t = t - 1;
return -((float) Math.pow(2, 10 * t) * (float) Math.sin(((t - period / 4) * (Math.PI * 2)) / period));
}
},
OUT_ELASTIC {
@Override
public float calc(float t) {
if (t == 0 || t == 1)
return t;
float period = 0.3f;
return (float) Math.pow(2, -10 * t) * (float) Math.sin((t - period / 4) * (Math.PI * 2) / period) + 1;
}
},
IN_OUT_ELASTIC {
@Override
public float calc(float t) {
if (t == 0 || t == 1)
return t;
float period = 0.44999996f;
t = t * 2 - 1;
if (t < 0)
return -0.5f * ((float) Math.pow(2, 10 * t) * (float) Math.sin((t - period / 4) * (Math.PI * 2) / period));
return (float) Math.pow(2, -10 * t) * (float) Math.sin((t - period / 4) * (Math.PI * 2) / period) * 0.5f + 1;
}
};
/** Overshoot constant for "back" easings. */
private static final float OVERSHOOT = 1.70158f;
/**
* Calculates a new {@code t} value using the animation equation.
* @param t the raw {@code t} value [0,1]
* @return the new {@code t} value [0,1]
*/
public abstract float calc(float t);
}