dos e0005 motionData - cwtickle/danoniplus-docs GitHub Wiki

English | Japanese

^ Return to Screen effects specification

| < CSS skin change | Arrow and freeze-arrow motion | Key types change > |

Arrow and freeze-arrow motion ( arrowMotion_data, frzMotion_data )

Overview

  • Sets the animation to be added to the arrow and freeze arrow.

Usage

|arrowMotion_data=
300,20,toRight,toLeft
900,20,none
|
|frzMotion_data=
300,20,toRight,toLeft
900,20,
|

|arrowMotion2_data=...|
|arrowMotion3_data=arrowMotion2_data|  // The third chart is a copy of the data of the second chart

One set of four. "arrowMotion_data" is for arrows and "frzMotion_data" is for freeze arrows. Both have different names, but the usage is the same.

Descriptive specification

No Logical name Example Description
1 Frame 200 Specifies the number of timing frames to be changed.
2 ColorNo 20 Specify the object (arrow number) to be changed, such as an arrow or freeze arrow. See below.
3 styleName toRight CSS class name describing animation attribute (for upward scrolling)*.
4 styleName toLeft CSS class name describing animation attribute (for downward scrolling)*.

*It can be omitted. To remove the motion, specify none or leave it empty. If you specify the third CSS class name and omit the fourth CSS class name, both will be the third CSS class.

Arrow number

The color change specifies an arrow number indicating the target. The specifications are as follows.

Arrow Number Logical name Description
0-19 or1000- Arrows (individual) Specifies how many arrows are in the step zone when arranged in left-to-right and top-to-bottom order. Starts at 0. Used to apply arrows individually. Pattern 0 for each key is the standard. Other patterns are automatically selected in the source.
20-24 Arrow groups 1-5 Set the arrow group specified by "setColor" from 1 to 5.

About the CSS class to be specified

  • Specify the corresponding CSS class in the CSS file.
  • The CSS class should be a CSS class with attributes related to animation. However, the animation-duration attribute is automatically set and does not need to be set.
  • For keyframes that you set, make sure that the coordinate position becomes the original position (translateX and translateY are 0px respectively) at the end of the keyframes (100%).
/* CSS class specified by motionData */
.toSpin {
    animation-name: spinY;
}
/* Y axis rotation */
@keyframes spinY {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

Related pages

Changelog

Version Change details
v34.0.0 - Added the ability to combine individual arrow and freeze-arrow motion settings while referencing data from other charts.
v31.2.0 - Added the ability to specify the data name of another arrow or freeze-arrow motion to refer to the settings of that data name.
v26.0.0 - Support for dummy arrow and freeze arrow motion change (usage is the same as normal)
v21.0.0 - Support for more than 20 keys
v7.0.0 - Initial implementation

| < CSS skin change | Arrow and freeze-arrow motion | Key types change > |