LabelWords sequence for alpha change not working

Bugs
, ,
1

Trying to do alpha change from 0 > 1 doesn't work. You can test this out in the editor.

// Given F, S, W, H or frame, stage, stageW, stageH

new LabelWords({
    label:"Testing Opacity",
    color:black,
    itemRegY:BOTTOM,
    itemCache:true,
    size:50,
    width:800,
    align:CENTER
}).center().mov(0,-50).alp(1)
    .animate({props: {alpha:0}, sequence: .75});
new LabelWords({
    label:"Testing Opacity Animation",
    color:black,
    itemRegY:BOTTOM,
    itemCache:true,
    size:50,
    width:800,
    align:CENTER
}).center().mov(0,50).alp(0)
    .animate({props: {alpha:1},time:2.25});
new LabelWords({
    label:"Testing Opacity Animation",
    color:black,
    itemRegY:BOTTOM,
    itemCache:true,
    size:50,
    width:800,
    align:CENTER
}).center().mov(0,50).alp(0)
    .animate({props: {alpha:1}, sequence: .75});
2

Ah... tricky... the alp(0) is on the whole container of the LabelWords - which is the Wrapper. The alpha of the sequence animation is on each word. You can use the set:{alpha:0} in the animate() or just animate to alpha:0 if that works for you.

image

3

AAAAh I gotcha. Thanks for the clarification. A setProps method on the LabelWords would be nice too. This was my quick fix.

cciText.set = (props) => {
    loop(cciText.labels, label => {
        for (let prop in props) {
            label[prop] = props[prop];
        }
    });
}
cciText.set({alpha:0});
1 Like
4

Consider using a function instead so you aren't put in the delicate position repeating the variable name within itself (DRY). The below allows you to use "this" instead...

cciText.set = function(props) {
    this.labels.forEach(label => Object.assign(label, props));
}

...usage example...

// Demo object
const cciText = {
    labels: [
        {name: "a", val: "1"},
        {name: "b", val: "2"},
        {name: "c", val: "3"}
    ]
};

// To have "this", use a normal function NOT arrow function
cciText.set = function (props) {
    this.labels.forEach(label => Object.assign(label, props));
}

// Test
cciText.set({alpha: 0});
console.log(JSON.stringify(cciText.labels));
5

@josephd Did you test to see if that works with a ZIM Object?

@abstract This is definitely worth putting into LabelWords. Also maybe an additional option that you can assign by index. Just thoughts.

6

@pettis No, but even if it doesn't, and you prefer loop, you can fix it thusly...

cciText.set = function (props) {
    loop(this.labels, label => Object.assign(label, props));
}

That is, the only thing that might not work is the forEach on labels, cuz I don't know what labels is. But since you've confirmed using loop, you can be sure it will work with that.

7

The labels are an array of ZIM Object Label() that come from the Zim Object LabelWords.

8

Well then as an array, which was my original assumption, you can use my first or second example. It's all the same.

It doesn't matter that they are ZIM objects, if that's what you mean. ZIM objects are JS objects, and in your own code you are using them as such (label[prop] = x). So, any sort of normal property modification will have the same effect.

Anyway, it's a quick test to be sure, and assuming it works, you now have way fewer moving parts and no dangerous self-referential variable names.

9

Here you go, fully functional example...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ZIM 016 - LabelWords - Code Creativity</title>

    <!-- zimjs.com - JavaScript Canvas Framework -->

    <script type=module>

        import zim from "https://zimjs.org/cdn/016/zim";
        import {makeIcon} from "https://zimjs.com/016/icon";

        // See Docs under Frame for FIT, FILL, FULL, and TAG
        new Frame(FIT, 1024, 768, interstellar, black, ready);
        function ready() {
            const cciText = new LabelWords({
                label:"Here is LabelWords that divides text into words for individual control!",
                color:white,
                itemRegY:BOTTOM,
                itemCache:true,
                backgroundColor:series(red,orange,pink,green,blue,purple),
                size:50,
                width:700,
                align:CENTER
            }).center().mov(0,20).animate({
                props:{scaleY:0},
                time:.5,
                rewind:true,
                loop:true,
                sequence:.1
            });

            //////////////////////////////////////////////////////
            //
            // Add new or change existing properties on this object
            //
            cciText.set = function (props) {
                this.labels.forEach(label => Object.assign(label, props));
            }
            //
            //////////////////////////////////////////////////////
            //
            // Example usage
            //
            cciText.set({alpha: 0.5});
            //
            //////////////////////////////////////////////////////
        }

    </script>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>
2 Likes
10

Thanks guys, this has been added to ZIM 016 in LabelLetters, LabelWords, Tile, and Wrapper as setProps() as createjs already has a set() method - which does something similar but not through an object's items. Hmm we maybe could have put it on a container... but leaving that for now as many containers do not have repeating objects so might not make sense.

new LabelLetters().center().setProps({color:series(pink,blue)});

image

new LabelWords()
	.center()
	.setProps({
		rotation:{min:10,max:20,negative:true},
		font:["verdana", "courier"]
	});

image
image742×339 21.8 KB

new Tile().center().setProps({color:[red,orange,blue]})

image

1 Like
11

Ended up making a general function to do this and then use the function in each of the methods - DOCS - ZIM JavaScript Canvas Framework - Documentation you guys are in the docs!

13

I have closed this topic. Can anyone reading this try and reply to it below to see if you guys can reply to a closed topic. If you can't reply, then could you give this message a like? Thanks.

2 Likes