Giter VIP home page Giter VIP logo

Comments (3)

trusktr avatar trusktr commented on June 9, 2024

I chatted with @Morgantheplant and we thought perhaps a nice result would be that the content behavior of the node overrides whatever is in the tree?

from framework.

arkadyp avatar arkadyp commented on June 9, 2024

@trusktr Can you share the code for that example?

from framework.

trusktr avatar trusktr commented on June 9, 2024

@arkadyp Sure. (:

FamousFramework.component('joejoe:experiments', {
    behaviors: {
        '#root': {
            content: `<h1>Hello render glitches!</h1>`,
            size: [undefined, undefined],
            style: {
                'background-color': 'rgba(217, 154, 167, 0.5)',
                perspective: '1000px'
            }
        },
        '.hello': {
            'inner-html': function(options) {
               var content = ''
               for (let i = 0, len=options.length; i<len; i+=1) {
                   content += (`
                       <option value="${options[i].toLowerCase()}">
                           Option ${options[i]}!
                       </option>
                   `)
               }
               return content
            }
        },
        '.spinner': {
            $repeat: function(spinners) {
                return spinners
                //return 3 // this would be nice.
            },
            //$repeat: 3, // or this, when we don't have an array.
            content: (` <h2>spinner</h2> `),
            size: [100, 100],
            origin: [0.5,0.5,0.5],
            style: {
                'background-color': '#9AD9CC',
                'backface-visibility': 'visible'
            },
            'position-x': function(spinners, $index) {
                var i = $index
                return 100+(i*100)
            },
            'position-y': function(spinners, $index) {
                var i = spinners[$index] / 12000
                return 200+(100*Math.sin(i))
            },
            'position-z': function(spinners, $index) {
                var i = spinners[$index] / 12000
                return (200*Math.sin(i))
            }
            //'rotation-y': function(rotation, $index) {
                //return rotation*($index+1);
            //}
        }
    },
    states: {
        options: [ 'one', 'two', 'three' ],
        spinners: [1000,4000,7000,10000,13000,16000,19000,22000,25000,28000,31000,34000]
    },
    events: {
        // life cycle events for child nodes would be great!! Any implications?
        //'.spinner': {
            //'post-load': function($index, $famousNode) {
            //}
        //},
        $lifecycle: {
            'post-load': function($state, $timelines, $famousNode /*, $clock*/) {
                //$clock.setInterval(function() {
                    //$state.set('rotation', $state.get('rotation') + Math.PI, {duration: 5000})
                //}, 16)
                setTimeout(function() {
                    $timelines.get('startRotation').start({duration: 8000}, function rotate() {
                        $timelines.get('rotation').start({duration: 4000}, rotate)
                    })
                }, 1000)

                var id = $famousNode.addComponent({
                    onUpdate: function(time) {
                        var spinners = $state.get('spinners')
                        for (let i=0, len=spinners.length; i<len; i+=1) {
                            spinners[i] = (spinners[i]+500)
                        }
                        $state.set('spinners', spinners)
                        $famousNode.requestUpdateOnNextTick(id)
                    }
                })
                $famousNode.requestUpdateOnNextTick(id)
            }
        }
    },
    tree: (`
        <node id="root">
            <node class="spinner">
                <div>
                    <select class="hello"> </select>
                </div>
            </node>
        </node>
    `)
})

.timelines({
    rotation: {
        '.spinner': {
            'rotation-y': {
                '0%':   { value: 0, curve: 'linear' },
                '100%':  { value: Math.PI * 2, curve: 'linear'}
            }
        }
    },
    startRotation: {
        '.spinner': {
            'rotation-y': {
                '0%':   { value: 0, curve: 'easeIn' },
                '100%':  { value: Math.PI * 2, curve: 'linear'}
            }
        }
    }
})

from framework.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.