https://linen.dev logo
Powered by
# haxe-ui
  • a
    very nice for contained build environments
  • b
    i had to get my head around it a little, but it was just me thinking in the wrong way
  • b
    for example, for the hxpp builds, i was creating a normal container (with haxe preinstalled) and then on the running container downloading build essentials and gcc (using apt-get)
  • b
    so it was like a 3 min build
  • b
    then i was like "doh, i can preinstall them too!"
  • b
    so now its like a 10s build
  • a
    😄 nice
  • b
    same goes for all the other stuff... eventually, when it gets a little bit further along, the idea will be that the server will build up (over time) all these prebuilt containers... 
    openfl_hxcpp_lime
    for example
  • a
    yeah it feels like a waste doing apt-get in your scripts
  • b
    yeah, it was just a little not thinking right, i was thinking of it as a container env, which it is, but its much more
  • a
    it all feels like a huge waste of resources to me actually, spinning up all this stuff just for some CI for example, but it's so damned useful
  • b
    well, for the macros use case its absolutely perfect
  • b
    @User - so i think animated buttons are perfectly feasible using the css animation:
  • b
    i really dont like the css though
  • b
    Copy code
    css
@keyframes animateButton {
    0%     { background-image: "img/test_1.png"; }
    5%     { background-image: "img/test_2.png"; }
    10%    { background-image: "img/test_1.png"; }
    15%    { background-image: "img/test_2.png"; }
    20%    { background-image: "img/test_1.png"; }
    25%    { background-image: "img/test_2.png"; }
    30%    { background-image: "img/test_1.png"; }
    35%    { background-image: "img/test_2.png"; }
    40%    { background-image: "img/test_1.png"; }
    45%    { background-image: "img/test_2.png"; }
    50%    { background-image: "img/test_1.png"; }
    55%    { background-image: "img/test_2.png"; }
    60%    { background-image: "img/test_1.png"; }
    65%    { background-image: "img/test_2.png"; }
    70%    { background-image: "img/test_1.png"; }
    75%    { background-image: "img/test_2.png"; }
    80%    { background-image: "img/test_1.png"; }
    85%    { background-image: "img/test_2.png"; }
    90%    { background-image: "img/test_1.png"; }
    95%    { background-image: "img/test_2.png"; }
    100%   { background-image: "img/test_1.png"; }
}

#anim1 {
    background-color: #FF0000;
    background-image: "img/test_1.png";
    opacity: .7;
}

#anim1:hover {
    opacity: 1;
    background-color: #FF0000;
    animation: animateButton 1s ease 0s infinite forward forwards;
}
  • b
    so im going to play with it a little, v1.2 was supposed to be a whole revamp to the style system, which was half done, but i pushed it back to v1.3 because there were more important things...
  • b
    in the mean time though, i think i might make a few updates to try and see if i can make this a little nicer... what i would like ideally is the actuators to be "clever" and be able to interpolate string values
  • b
    so you could just do:
  • b
    Copy code
    css
@keyframes animateButton {
    0%     { background-image: "img/test_1.png"; }
    100%   { background-image: "img/test_55.png"; }
}
  • b
    i wonder if this is a reasonable compromise:
  • b
    Copy code
    css
@keyframes animateButton {
    0%     { background-image: "img/test_${1}.png"; }
    100%   { background-image: "img/test_${55}.png"; }
}
  • b
    thoughts anyone?
  • b
    So that was fun :) haxeui-html5 and haxeui-openfl shown... haxeui-flixel has some issues, but i dont think its anything to with this, i think there is an issue with background images in general
  • b
  • b
    duh... no haxeui-flixel working fine... it was because they will still using the slice-9 / clip parts of the theme so was "cutting out" little corners of the image...
  • b
  • a
    Looks great
  • h
    @User Looks great! One question, you set animation on hover, how can I set animation to play infinite without hover (starting when add the button on the screen) . Is this the way: #anim2 { background-image: "img/image_0.png"; animation: animateButton2 1s linear 0s infinite forward forwards; }
  • b
    sure, just use:
  • b
    Copy code
    css
#anim2 {
    background-image: "img/image_0.png";
    animation: animateButton2 1s linear 0s infinite forward forwards;
}
1...407408409...1687Latest